避免不必要的组件重渲染，核心在于控制响应式依赖粒度、减少无效更新触发、合理利用缓存与复用机制：用计算属性替代模板中方法调用，避免内联函数；稳定传递props（如torefs、shallowref）；善用key和v-memo精准锁定更新边界；优化全局状态订阅粒度。
避免不必要的组件重渲染，核心在于控制响应式依赖的粒度、减少无效更新触发、以及合理利用 Vue 的缓存与复用机制。不是所有状态变化都需要让组件动起来，关键是要让更新“精准”发生。
用计算属性代替模板中直接调用方法
在模板里写 {{ getUserName() }} 这类调用，每次父组件重渲染都会执行函数，还可能引发子组件连带更新。计算属性有缓存机制，只在依赖数据变化时才重新求值。
- ✅ 把逻辑移到
computed中，比如fullName依赖firstName和lastName - ✅ 对列表过滤、格式化等操作，统一用计算属性封装，避免
v-for内写items.filter(...) - ❌ 避免在
template中使用内联函数或方法调用
谨慎传递对象和数组 prop
Vue 的 props 是浅比较引用，每次渲染若传入新对象（如 :config="{ theme: 'dark' }"），即使内容相同，也会被判定为“已变更”，强制子组件更新。
- ✅ 在
data或computed中定义稳定对象，再传给子组件 - ✅ 使用
toRefs或toRef拆解响应式对象，避免整个对象作为 prop 传递 - ✅ 对大型配置对象，考虑用
shallowRef包裹，跳过深度响应式转换开销
善用 key 与 v-memo 控制更新边界
key 不仅用于 v-for 列表，也能告诉 Vue：“这个组件实例是否该复用”。v-memo（Vue 3.2+）则能锁定模板片段的更新条件。
- ✅ 列表项用唯一 ID 做
key，别用索引；排序/增删时更稳定 - ✅ 对静态或低频变动的区块，加
v-memo="[dep1, dep2]"，只有依赖变化才重渲染 - ✅ 路由切换时，用
<keep-alive></keep-alive>缓存页面组件，避免重复创建销毁
优化 Vuex / Pinia 状态订阅粒度
全局状态管理器一旦绑定太宽泛，一个字段更新就可能让十几个组件跟着刷新。
- ✅ Pinia 中用
storeToRefs解构需要的字段，避免整个 store 响应式代理被追踪 - ✅ Vuex Pathify 避免通配符
sync('user/*')，改用sync('user', ['name', 'email']) - ✅ 深层状态（如
state.items[0].details.tags[2]）尽量不直接监听，改用 getter 或中间 computed 缓存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
