减少子组件重渲染的关键在于精准控制响应式依赖、稳定 props 传递、合理使用 v-memo 和利用 Block Tree 编译优化；需避免过度 reactive、禁用内联对象传参、用 storeToRefs 解构、设稳定 key，并在静态区块主动加 v-memo。
减少不必要的子组件重渲染，核心是让 Vue 准确识别“哪些变化真需要更新”，而不是被动响应父组件的每一次刷新。关键不在禁用更新，而在控制依赖粒度、稳定数据传递、善用编译与运行时优化机制。
控制响应式依赖的精细度
Vue 的响应式系统会追踪 ref、reactive 包裹的值，但过度包裹会导致“牵一发而动全身”：
- 对只读大对象（如字典、配置项），用 shallowRef 或 markRaw 跳过深度代理，避免无谓的依赖收集
- 深层嵌套对象若只需监听某几个字段，不要整个 reactive，拆成多个 ref 或用 computed 封装派生状态
- 从 Pinia store 中取值，优先用 storeToRefs 解构具体字段，而不是直接返回整个 store 对象
稳定传递 props，避免虚假变更
子组件是否更新，常取决于 props 引用是否变化。模板中写法稍有不慎，就会触发误判：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 别在 v-bind 中传内联对象：
:config="{ theme: 'dark' }"→ 每次都新建引用；改用预定义的 ref 对象或 toRefs 拆解 - 事件处理器别写在模板里：
@click="() => handleClick(id)"→ 改为在 setup 或 methods 中定义并绑定 -
v-for 列表必须用稳定唯一 key，推荐业务 ID，禁用
:key="index"，否则排序、增删会强制节点重建
用 v-memo 精准锁定更新边界
v-memo（Vue 3.2+）不是全局开关，而是局部“缓存开关”，适用于内容静态、仅少数依赖变动的区块：
立即学习“前端免费学习笔记（深入）”；
- 语法：
<div v-memo="[user.id, isExpanded]">...</div>，只有数组中任一值变化，该区块才重渲染 - 适合场景：长列表中的单项（如 1000 条数据，仅选中态变化）、复杂子组件外层容器、含静态文本+少量动态插值的区域
- 注意：空数组
v-memo="[]"等效于 v-once；依赖漏写会导致更新被跳过，需严格匹配真实影响因素
借助 Block Tree 编译优化天然规避干扰
Vue 3.4 的 Block Tree 是隐式优化机制，不需手动编码，但写法会影响它是否生效：
- 纯静态标签（
<div>Hello</div>）、静态 class/style、无绑定的<slot></slot>都会被合并为扁平 block，不受父组件响应式更新波及 - 动态内容与静态结构分离更易触发优化，例如：
<h2 :class="cls">{{ title }}</h2>中 class 变化只打补丁，不重建整节点 - v-memo 区域会显式标记 block 边界，与 Block Tree 协同效果更稳，建议在关键静态区块主动加上
