Diff算法深度解析插槽动态变化与父子组件Patch顺序

在Vue的响应式系统中，插槽（Slots）的动态更新机制常常被误解为子组件的内部行为。实际上，插槽内容的生成与更新，其主导权完全掌握在父组件手中。它并非一个独立的子组件，而是父组件渲染函数中的一个“按需调用”的函数式产物。理解这一核心原理，是掌握整个Vue插槽更新链条的关键所在。

简单来说，插槽不参与子组件自身的虚拟DOM（VNode）对比（diff）流程。真正的逻辑发生在父组件更新并开始修补（patch）其子VNode时：父组件决定是否要更新子组件实例上的slots对象引用，这个判断会触发子组件重新执行渲染函数。直到这时，子组件内部才会基于全新的插槽内容，执行自己的diff算法。

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

插槽内容，无论是slots.default还是具名插槽如slots.header，本质上都是一个函数。这个函数仅在父组件的渲染阶段被调用，并返回一组VNode。因此，任何导致父组件重新渲染的响应式依赖变化，都会成为插槽VNode重新生成的触发器。

例如，父组件模板中控制插槽的v-if条件发生翻转、v-for的源数组被更新，或者作用域插槽传入的props数据发生变化。一旦父组件重新执行render，新的插槽函数就会被调用，从而生成全新的插槽VNode数组。

这里有三个关键细节需要把握：

• 惰性构造：插槽VNode没有缓存，也不会在不同次更新间复用。它只在父组件渲染的那一刻才被创建出来。
• 引用敏感：即使子组件实例没有被销毁，只要父组件传入的slots对象引用发生了变化（哪怕两个函数返回的内容一模一样），Vue就会认为插槽需要更新。
• 子组件的视角：子组件自身无法、也无需去感知插槽“内部内容”是否发生了变化。它只依赖一个简单的浅比较（shallowEqual）来判断slots对象的引用是否变更，以此决定是否要重新渲染。

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

插槽的更新严格遵循着“父先子后”的修补时序，这个顺序至关重要：

1. 当父组件的diff过程进入子组件对应的VNode节点时，会首先调用updateComponentPreRender函数。
2. 这个函数负责更新子组件实例的props和slots。如果检测到slots的引用发生了变化，就会标记子组件需要重新渲染（即使它的props没有任何改动）。
3. 接着，触发子组件执行其render()函数，产出新的VNode树。此时，子组件内部的diff流程才真正开始，它会对本次渲染输出的新旧VNode树进行对比。
4. 一个重要的结论是：子组件的diff过程，不会回头去对比“上一次由父组件生成的插槽VNode”。它只对比自己本次渲染和上一次渲染的输出结果。

举个例子就清楚了。假设父组件模板是这样的：

{{ msg }}

• 父组件重新渲染 → 调用新的slots.default函数 → 返回包含新文本的

  VNode。

• 父组件patch到Child的VNode → 发现传入的slots引用已不同 → 触发Child的pre-render更新逻辑。
• Child被迫再次执行render → 其模板中的标签展开为新的

  VNode → 这个新VNode进入Child自身的patchChildren流程进行差异化更新。

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

作用域插槽（例如v-slot:item="{ data }"）本身并不携带key。但是，当它在v-for循环中被使用时，情况就变得有趣了。真正起作用的，是父级v-for为每一个循环项生成的、那个包裹了插槽内容的VNode所自带的key。

在这种情况下，Vue的处理流程如下：

• 父组件将插槽内容作为子组件slots的一部分传入，同时每个循环项对应的VNode都保留了自己唯一的key。
• 子组件渲染时，插槽内容展开，形成一组带有key的子节点。
• 当子组件内部执行patchKeyedChildren（针对带key子节点的diff算法）时，就能利用这些key进行精准的节点复用和位置移动，而不是粗暴地整体替换。
• 所以，当列表中只有某一项的插槽内容发生变化时，父组件会生成带有相同key的新VNode。子组件的diff算法能识别出这是“同一个节点”，从而只更新其内部的props或文本内容，避免了不必要的DOM卸载和重新挂载，性能得以优化。

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

这是一个常见的误区。根本原因在于，插槽内容的DOM属于父组件渲染流程的最终产物，子组件的生命周期完全无法控制它的生成时机。

• created 阶段：此时父组件的渲染可能还未执行，子组件实例上的slots可能是空的，或者只有默认的回退（fallback）内容。更重要的是，真实的DOM根本还不存在。
• mounted 阶段：到了这一步，父组件的首次patch已经完成，子组件也完成了自己的首次渲染，此时插槽内容才真正被挂载到子组件的DOM树中。
• 正确时机：如果需要在子组件中访问或操作插槽渲染出的DOM，必须在onMounted生命周期钩子中，并且通常要结合nextTick来确保子组件内部的插槽内容也已经渲染完毕。

这个道理并不复杂，但在急切需要操作DOM时却很容易被忽略，导致访问到null或未定义的元素。