Vue3 性能优化 8 条黄金法则

下面给你一份Vue3 性能优化 8 条黄金法则都是面试高频 项目实战最有效的点简单、直接、能马上用。一、核心原则先记住Vue3 性能优化 减少不必要的响应式 减少不必要的渲染 减少不必要的 diff二、8 条黄金法则最实用1.能用 ref 就别用 reactive减少响应式范围reactive 会把整个对象变成响应式范围大、开销高ref 只包裹单个值开销小复杂对象拆成多个 ref比一个 reactive 更轻量示例// 不推荐constuserreactive({name:,age:0})// 推荐constnameref()constageref(0)2.v-for 必须加 key且不要用 indexindex 会导致 diff 错乱、重渲染大量元素用唯一 id 作为 key让 Vue 精准复用节点示例div v-foritem in list :keyitem.id3.v-if 比 v-show 更适合频繁切换外的场景v-show 只是 CSS 切换v-if 会销毁/重建组件频繁显示隐藏 → v-show只显示一次 → v-if4.避免在模板中写复杂表达式模板表达式会每次渲染都执行导致不必要计算。示例// 不推荐 div{{ a b * 2 c }}/div // 推荐 const computedVal computed(() a b * 2 c) div{{ computedVal }}/div5.使用 computed 替代 watch减少副作用watch 会产生副作用开销大computed 是缓存型更轻量示例// 不推荐watch(a,(){ba*2})// 推荐constbcomputed(()a*2)6.使用 shallowRef / shallowReactive 减少响应式当你不需要深度监听时用 shallow 版本shallowRef只监听 .valueshallowReactive只监听第一层示例constformshallowReactive({name:,detail:{...}// 不监听})7.使用 v-memo 缓存静态内容对不变的列表/节点使用 v-memo避免重复渲染。示例div v-foritem in list :keyitem.id v-memo[item.id]8.组件拆分 合理使用 keep-alive大组件拆分成小组件减少渲染范围频繁切换的组件用 keep-alive 缓存示例keep-alive component :iscurrent / /keep-alive三、超精简总结面试背这个小范围响应式ref 优先v-for 必须用唯一 keyv-if/v-show 合理选择模板表达式不要复杂用 computed 替代 watchshallow 减少响应式层级v-memo 缓存静态内容组件拆分 keep-alive四、一句话终极版Vue3 性能优化 减少不必要的响应式 减少不必要的渲染 减少不必要的 diff 缓存静态内容