Vue 性能优化涵盖 bundle 大小、rendering 效率和 reactivity 成本。以下是影响最大的技术。
1. Code splitting / lazy loading
js
// lazy-load routes and heavy components → smaller initial bundle
const routes = [{ path: , : () }];
= ( ());
Vue 性能优化涵盖 bundle 大小、rendering 效率和 reactivity 成本。以下是影响最大的技术。
// lazy-load routes and heavy components → smaller initial bundle
const routes = [{ path: , : () }];
= ( ());
初始加载的最大赢利点：不要下发用户暂时不需要的代码。
<div v-show="tab === 'a'"> <!-- toggled often → cheap CSS flip -->
<div v-if="rarelyShown"> <!-- rarely rendered → skip building it -->
<li v-for="item in items" :key="item.id"> <!-- enables efficient DOM reuse/diffing -->
import { shallowRef, shallowReactive } from "vue";
// for large objects you replace wholesale (or 3rd-party instances), skip deep tracking
const bigData = shallowRef(hugeObject); // only .value reassignment is reactive
Object.freeze(staticConfig); // never-changing data → no reactivity overhead
对大对象的深度 reactivity 成本高；shallowRef/shallowReactive/Object.freeze 可以避免追踪不需要的数据。
<p>{{ expensiveComputed }}</p> <!-- cached, recomputes only on dependency change -->
<header v-once>{{ siteName }}</header> <!-- render once, never update -->
<div v-memo="[item.id]">...</div> <!-- re-render only if item.id changes -->
Rendering 10,000 rows kills performance → use vue-virtual-scroller / TanStack Virtual
to render only the visible rows.
Vue DevTools (component render timings, why a component re-rendered)
build output / rollup-plugin-visualizer → bundle composition
Lighthouse → Core Web Vitals
Vue 默认很快，但大型应用需要有意的优化：通过 lazy-load 缩小 bundle、正确选择 v-if/v-show、使用稳定的 key、在大数据上避免过度 reactivity (shallowRef/freeze)、用 computed/v-memo 缓存，以及对长列表进行虚拟化。
知道哪种技术解决哪个瓶颈——用 DevTools/Lighthouse 测量而不是猜测——这才是保持不断增长的 Vue 应用响应灵敏的关键。
一个包含详细解答的 IT 面试题库——从初级到高级。
捐赠