减少子组件重渲染的关键在于精准控制响应式依赖、稳定 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+）不是全局开关，而是局部“缓存开关”，适用于内容静态、仅少数依赖变动的区块：

• 语法：
  ...
  ，只有数组中任一值变化，该区块才重渲染
• 适合场景：长列表中的单项（如 1000 条数据，仅选中态变化）、复杂子组件外层容器、含静态文本+少量动态插值的区域
• 注意：空数组 v-memo="[]" 等效于 v-once；依赖漏写会导致更新被跳过，需严格匹配真实影响因素

借助 Block Tree 编译优化天然规避干扰

Vue 3.4 的 Block Tree 是隐式优化机制，不需手动编码，但写法会影响它是否生效：

• 纯静态标签（
  Hello
  ）、静态 class/style、无绑定的 都会被合并为扁平 block，不受父组件响应式更新波及
• 动态内容与静态结构分离更易触发优化，例如：

  {{ title }}

  中 class 变化只打补丁，不重建整节点
• v-memo 区域会显式标记 block 边界，与 Block Tree 协同效果更稳，建议在关键静态区块主动加上

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！