减少VNode树深度的核心是降低diff复杂度和内存开销，Vue3通过Block Tree切片、静态提升、浅层响应式、函数式组件与Fragment等机制实现高效优化。
减少 VNode 树的深度，本质是降低虚拟 DOM 的比对复杂度和内存开销。Vue 的 diff 算法按层级递归遍历 VNode 树，树越深，遍历路径越长，尤其在频繁更新或动态节点多的场景下，性能损耗明显。真正有效的优化不是“砍掉层级”，而是让 Vue 在编译和运行时能跳过不必要的深度结构处理。
用 Block Tree 划分稳定子树
Vue3 编译器会自动将 v-if、v-for、动态 key 的元素 等不稳定节点包裹为 Block（块级作用域）。每个 Block 是独立的 diff 单元，内部变化不会触发父 Block 重比对。这意味着：即使整个组件 VNode 树很深，只要合理使用 Block 触发点，就能把深层嵌套“切片”成多个轻量级子树。
- v-for 列表项默认被编译为 Block，但需确保 key 是稳定且唯一的（避免用 index）
- 手动用 <template v-if> 或 <component :is> 替代冗余嵌套 div，减少无意义层级
- 避免在深层嵌套中写内联函数或复杂表达式，它们会阻止 Block 提升
静态提升 + 预字符串化，消除深层静态节点
编译阶段，Vue 会把模板中完全静态的节点（如不带任何绑定、指令、插槽的 <h1>、<p>）提取到 render 函数外，只创建一次并复用。这直接减少了运行时 VNode 树的节点总数和深度。
- 静态节点不会被提升的情况：含动态 key、ref、自定义指令、v-once 外的 v-bind:class
- 对纯展示型子组件（如 Icon、Label），可加 v-once 或用 defineComponent({ inheritAttrs: false }) 减少属性透传带来的深层 props 解析
- 文本内容尽量用 {{ text }} 而非 v-text，前者支持 PatchFlags TEXT 优化，后者强制全量更新
浅层响应式 + markRaw 控制代理边界
VNode 深度增加不仅来自 DOM 结构，更来自响应式数据的嵌套代理深度。一个 10 层深的对象被 reactive 处理后，Vue 会在 getter 中递归 traverse 所有子属性——这本身就会生成隐式的深层 VNode 依赖链。
立即学习“前端免费学习笔记（深入）”；
- 对只读大数据（如树形菜单、配置列表），用 markRaw 包裹 format 后的数据，彻底跳过响应式代理
- 对需局部更新的大型对象，改用 shallowRef 或 shallowReactive，让 Vue 只监听顶层引用变更
- 避免在 setup 中直接解构 reactive 对象，改用 toRefs 或 toRef，防止丢失响应性导致意外深层重建
函数式组件与 Fragment 精简结构
函数式组件不创建实例、不维护状态、不触发生命周期，其 render 返回的 VNode 树天然扁平。Fragment（<></>）则允许你组织逻辑而不增加真实 DOM 层级，编译后不产生额外 VNode 节点。
- 纯展示逻辑（如表格行渲染器、卡片布局器）优先写成函数式组件
- 用 Fragment 替代无语义的 wrapper div，尤其在 v-for 内部或插槽传递时
- 注意：Fragment 在 Vue2 中需显式声明，Vue3 中默认支持，但需确保编译器版本 ≥ 3.2
