彻底搞懂 Vue 运行时的四大核心谜题：Render、Effect、Diff 算法与 Block Tree 演进

在前端面试或深入源码时，我们经常会听到一句话："Vue 会把组件的 render 函数包装成一个 effect（渲染 effect）。"

这句话听起来很高大上，但细究下去，会衍生出一连串直击底层的疑问。本文将通过"自问自答"的递进方式，用最接地气的比喻，带你拆解 Vue 运行时的核心机理。

谜题一：每个组件都有自己的 Render 和 Effect 吗？

💡 核心结论

是的。在 Vue 的世界里：一个组件实例 = 一个独立 render 函数 = 一个独立的渲染 effect。

页面上的组件树（父 <math xmlns="http://www.w3.org/1998/Math/MathML"> → \rightarrow </math>→ 子 <math xmlns="http://www.w3.org/1998/Math/MathML"> → \rightarrow </math>→ 孙），在运行时本质上就是一棵由独立 render 函数和各自渲染 effect 组成的树。

为什么不把整个应用做成一个大函数？

为了实现精准的组件级局部更新。

假设页面有这样一个嵌套关系：App（父） <math xmlns="http://www.w3.org/1998/Math/MathML"> → \rightarrow </math>→ UserList（子） <math xmlns="http://www.w3.org/1998/Math/MathML"> → \rightarrow </math>→ UserCard（孙）。

当你修改了孙子组件 UserCard 内部的数据（比如点赞数）时，Vue 的响应式系统只会触发 UserCard 的那一个渲染 effect。
结果是：只有孙子组件的 render 重新执行，父组件和子组件连动都不用动，完全不参与这次更新。这种隔离性带来了极高的性能表现。

谜题二：Render 函数和 Effect 到底是什么关系？

💡 核心结论

render 函数本身不是 effect。它们是"包含与被包含"的关系，各司其职。

我们可以用一个生动的比喻来区分它们：

render 函数是"子弹" ：它是一个相对纯粹的函数，只负责干活------根据最新的数据，生成最新的虚拟 DOM（VNode）。它本身没有响应式灵魂，你单独调用它，数据变了它也毫无知觉。
effect 是"自动化装填的枪" ：它是 Vue 响应式系统的副作用外壳。它把 render 包裹在内部执行。

源码视角下的幕后配合

当组件挂载时，Vue 底层大致做了这样一件事：

JavaScript

scss 复制代码

// 1. 纯粹的 render 函数（只负责生成 VNode）
const render = () => h('div', ctx.name) 

// 2. 包装更新逻辑：执行 render，拿到新 VNode，去 patch 更新真实 DOM
const componentUpdateFn = () => {
  const subTree = render()
  patch(prevTree, subTree, container)
}

// 3. 赋予响应式灵魂：包装成一个真正的 ReactiveEffect 实例
// 在执行过程中，ctx.name 的 getter 就会悄悄把这个 effect 收集到自己的"依赖本"上
const effect = new ReactiveEffect(componentUpdateFn)

// 4. 首次触发渲染
effect.run()

谜题三：数据改变时，是执行整个 Render 吗？怎么知道更新哪个 DOM？

💡 核心结论

当数据（如 name）改变时，确实运行了整个 render 函数来生成全新的虚拟 DOM 树。但是，Vue 并不需要知道"哪个 DOM 节点依赖了 name"，它是靠"执行顺序和位置"来认人的。

这里其实是两套完全独立的流水线在默契配合：

1. 谁引起的更新？（响应式系统负责）

name 改变时，响应式系统只知道"依赖我的那个整个渲染 effect 应该重新执行了"，它并不知道、也不关心这个 name 到底长在哪个 h1 还是 span 标签里。

2. 有很多动态节点，怎么知道谁是谁？（Vue 3 的靶向更新）

当整个 render 函数被重新执行时，Vue 3 利用了编译期的优化（Compiler-informed Virtual DOM） 。

你在模板里写的代码，编译成 render 函数时，执行顺序是绝对固定的。Vue 3 会把所有带有动态标记（PatchFlag）的节点，按照执行顺序 放进一个平铺的数组 dynamicChildren 中：

JavaScript

arduino 复制代码

// 无论渲染多少次，动态节点在 dynamicChildren 里的索引 (Index) 永远是一一对应的
// dynamicChildren = [ h1(动态文本), h2(动态文本), div(动态Class) ]

在随后的 Diff 阶段，Vue 3 直接无视所有的静态节点 ，开启外挂，直接用一个 for 循环对比新旧两个平铺数组：

JavaScript

ini 复制代码

// Vue 3 运行时底层的动态节点对比（伪代码）
for (let i = 0; i < oldBlock.dynamicChildren.length; i++) {
  const oldVNode = oldBlock.dynamicChildren[i];
  const newVNode = newBlock.dynamicChildren[i];

  // 按下标位置对号入座
  if (i === 0) {
    // 位置 0 永远是那个 h1。对比新旧值，发现旧的是"张三"，新的是"李四" -> 精准修改真实 DOM
    patchText(oldVNode, newVNode); 
  }
}

谜题四：遇到 v-if / v-for 破坏了节点结构，按位置对应不就错位了吗？

💡 核心结论

是的，v-if 和 v-for 会动态增删、移动节点，确实会破坏固定的位置对应。但 Vue 3 并没有全盘放弃退回老路，而是采用了一种高明的局部隔离策略------Block Tree（块树）。

在 Vue 3 中，并不是只有组件根节点才是 Block。任何带有 v-if 或 v-for 的指令节点，在编译时都会被圈起来，形成一个独立的"子 Block（Child Block）"。 每一个 Block，都拥有自己内部独立的 dynamicChildren 数组。

运行时如何局部降级？

外层依然走靶向更新：根 Block 顺着自己的平铺数组快速对比。
遇到 v-if 子 Block：
- 如果条件从 true 变为了 false，Vue 3 不需要挨个对比里面每一个节点，而是直接把这整个"子 Block"从 DOM 树上卸载。
- 如果条件没变，只是里面的数据变了，它才会进入这个子 Block 内部，用子 Block 自己的数组进行精准的靶向更新。
遇到 v-for 子 Block（Fragment Block） ：
- 因为循环数量是动态的，Vue 3 会在这个 v-for 内部的局限范围内，临时降级使用类似 Vue 2 的传统带有 Key 的 Diff 算法 ，老老实实通过 key 去计算节点的移动、新增和删除。
- 一旦局部处理完列表的移动，每个列表项内部的代码，依然可以继续享受靶向更新的红利。

终极对比：Vue 2 与 Vue 3 的 Diff 算法底层差异

前端框架的演进，很多时候并不是靠更复杂的算法，而是靠"降维打击"。Vue 2 和 Vue 3 在面对数据改变时的行为差异，可以通过下面这个形象的比喻彻底理解：

🧱 Vue 2：老实的检查员（全量树状层级遍历）

Vue 2 没有编译期的特殊标记，它的新旧两棵虚拟 DOM 树是完全对称的结构。

运行时行为 ：当数据变了，Vue 2 必须采用深度优先遍历（DFS） ，顺着树的枝丫，一层一层、从左到右地把所有节点都对比一遍。
痛点：如果组件内有 1 个动态节点，但夹杂了 999 个静态节点，Vue 2 依然要把这 1000 个节点全部在 JavaScript 层面比对一遍。
比喻：听说家里进贼（数据变了）了，检查员来到客厅，把所有的花瓶、桌椅、壁画挨个摸一遍、对一下照片，看看哪个被动过了。哪怕大件家具根本不可能变，他也得例行公事地检查一遍。

🚀 Vue 3：开了外挂的侦探（Block Tree 靶向更新）

Vue 3 在打包编译时，让编译器多干了活，给运行时"开了挂"。

运行时行为 ：利用 dynamicChildren 和 PatchFlag，在 Diff 时直接跳过所有静态节点。遇到结构不固定的 v-if 或 v-for 时，将其隔离进独立的 Block 房间里单独处理，完美平衡了"动态结构"与"极致靶向"。
比喻：在盖房子（编译阶段）的时候，侦探就把所有值钱、易动的物品用一根无形的线串成了一串 。进贼之后，他直接把这串东西扯出来按顺序数一遍。

而面对 v-if / v-for 这种不确定性，他相当于在客厅里单独盖了几个独立的密室（子 Block） 。密室外面依然是一眼看穿的线，只有当密室内部发生变化时，他才会走进去，在密室的局部老老实实进行检查。

📝 总结卡片

核心概念	一句话大白话
Render	组件的"施工图纸生成器"，负责产出 VNode。
Effect	响应式的"监控外壳"，负责在数据变了时重新执行 Render。
Vue 2 Diff	顺着树枝丫挨个摸（全量对比），静态节点多时较慢。
Vue 3 Diff	按顺序拎出动态节点连连看（靶向更新），速度极快。
Block Tree	把 `v-if/v-for` 关进局部密室独立处理，防止破坏整体的靶向更新。