Diff算法如何处理插槽变化？组件Patch顺序详解

Vue 的 Diff 算法处理插槽变化的关键在于“父定子随”：插槽内容本质是父组件 render 函数中按需执行的惰性函数，其 VNode 不缓存、不复用，仅在父响应式依赖变更时重新生成；父组件 patch 时通过比对 slots 对象引用（浅比较）决定是否触发子组件重 render，严格遵循“父先更新 slots → 子再重新 render 并 diff 自身树”的时序；作用域插槽的高效更新则依赖父级 v-for 提供的 key，使子组件内部能精准复用节点；而子组件无法在 created 阶段访问插槽 DOM，因其真实渲染完全由父控制，必须等到 mounted + nextTick 才能安全操作——看似简单，却处处体现 Vue 响应式与渲染流程的精妙协同。

Diff 算法处理插槽内容的动态变化，核心在于插槽不是独立组件，而是父组件 render 函数中“按需求值”的函数式内容；它不参与子组件自身的 diff 流程，而是在父组件 patch 到子组件 VNode 时，由父决定是否更新子组件的 slots 对象，并触发子组件重新 render —— 此时子组件内部才基于新 slots 执行自己的 diff。

插槽内容何时被重新生成？

插槽内容（即 slots.default、slots.header 等）本质是函数，在父组件 render 阶段被调用，返回一组 VNode。只要父组件响应式依赖变化（比如 v-if 条件翻转、v-for 数组更新、作用域插槽中传入的 props 变化），父的 render 就会重新执行，从而生成新的插槽 VNode 数组。

关键点：

• 插槽 VNode 是惰性构造的：只有父 render 跑了，它才存在；不会提前缓存或跨 patch 复用
• 即使子组件实例未销毁，只要父传入的 slots 引用变了（哪怕内容相同但函数不同），Vue 就认为插槽已更新
• 子组件自身无法感知插槽“内容变没变”，只认 slots 对象引用是否变更（靠 shallowEqual 判断）

父子 Patch 顺序如何影响插槽更新？

插槽更新严格遵循“父先于子”的 patch 时序：

• 父组件 patch 进入子组件 VNode 节点时，先调用 updateComponentPreRender 更新子实例的 props 和 slots
• 若 slots 引用变化，会标记子组件需要 re-render（即使 props 没变）
• 随后触发子组件 render()，产出新 VNode；此时子组件内部才开始 diff 自己的 children（含插槽内容渲染结果）
• 子组件的 diff 不会回溯去比对“上一次插槽生成的 VNode”，它只比对自己本次 render 输出的新旧 VNode 树

举例：父组件中写

{{ msg }}

• 父 render 重新执行 → 新的 slots.default 函数被调用 → 返回新的

  ...

  VNode 数组
• 父 patch 到 Child VNode → 发现 slots 引用不同 → 触发 Child 的 pre-render 更新
• Child 再次 render → 其模板中 展开为新 VNode → 进入 Child 自身的 patchChildren 流程

带 key 的作用域插槽怎么 diff？

作用域插槽（如 v-slot:item="{ data }"）本身不带 key，但它的使用位置可能在 v-for 中。真正起作用的是父级 v-for 为每个循环项生成的 slot VNode 自带 key。

这时 Vue 会：

• 将插槽内容作为子组件的 slots 一部分传入，key 保留在其生成的 VNode 上
• 子组件 render 后，插槽展开的节点形成一组带 key 的子节点
• 子组件内部执行 patchKeyedChildren，利用 key 做精准复用和移动，而非暴力替换
• 所以“列表中某一项插槽内容变” → 父生成新 VNode 带相同 key → 子 diff 识别为同一节点 → 只更新 props 或内部文本，不卸载重挂

为什么不能在子组件 created 中读取插槽 DOM？

因为插槽内容属于父组件 render 的产物，子组件生命周期完全不控制它的生成时机：

• created 阶段：父 render 还没跑，slots 可能为空或默认 fallback，且无真实 DOM
• mounted 阶段：父已完成 patch，子也完成首次 render，插槽内容已挂载到子组件 DOM 中
• 若需访问插槽 DOM，必须等 onMounted + nextTick（确保子组件内插槽已渲染完毕）

不复杂但容易忽略

今天关于《Diff算法如何处理插槽变化？组件Patch顺序详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！