各位老铁，晚上好！我是今晚的主讲人，咱们今晚就来聊聊 Vue 3 源码里，compiler 这家伙是怎么耍弄 v-if 和 v-for 这俩活宝嵌套在一起的。 别看这俩指令平时用着挺顺手，但 compiler 要想把它们解析得明明白白，那可得费一番功夫。
开场白：为啥要扒 compiler 的皮？
你可能会问，为啥要研究 compiler 怎么处理 v-if 和 v-for 嵌套？ 直接用不就得了？ 没错，直接用是没问题。但了解 compiler 的工作方式，能让你：
- 更深入理解 Vue 的运行机制： 知其然，更知其所以然。
- 写出更高效的代码： 避免一些不必要的性能损耗。
- 更好地调试 Vue 应用： 遇到奇怪的问题，能更快地定位原因。
- 甚至可以参与 Vue 的源码贡献： 如果你真的有这个想法的话。
总而言之，技多不压身嘛！ 好了，废话不多说，咱们直接进入正题。
第一幕：Vue Compiler 的前戏
在正式开始解析 v-if 和 v-for 嵌套之前，我们先简单了解一下 Vue compiler 的工作流程。 简单来说，compiler 的任务就是把你的 template 代码转换成渲染函数 (render function)。 这个过程大致分为三个阶段：
- Parsing (解析)： 把 template 字符串转换成抽象语法树 (AST)。 AST 就是用 JavaScript 对象来表示你的 HTML 结构。
- Transformation (转换)： 遍历 AST，对节点进行各种处理，比如处理指令、优化节点等等。
- Code Generation (代码生成)： 把转换后的 AST 转换成渲染函数的代码字符串。
我们今天主要关注的是 Transformation 阶段，因为 v-if 和 v-for 的处理逻辑主要集中在这个阶段。
第二幕：v-if 和 v-for 各自为战
在深入嵌套之前，我们先看看 compiler 是如何单独处理 v-if 和 v-for 的。
-
v-if的处理：v-if指令会被转换成一个三元表达式或者一个createBlock调用。 简单起见，我们假设它被转换成createBlock调用。例如，这段代码：
<div v-if="isShow">Hello</div>会被转换成类似这样的渲染函数代码：
import { createBlock, createCommentVNode } from 'vue'; function render(_ctx, _cache) { return (_ctx.isShow) ? (createBlock("div", null, "Hello")) : (createCommentVNode("v-if", true)) }简单解释一下：
createBlock： 创建一个 VNode (虚拟节点)。createCommentVNode: 创建一个注释节点，当v-if条件不满足时，渲染一个注释节点。
-
v-for的处理：v-for指令会被转换成一个renderList函数调用。renderList的作用就是遍历数据，为每个数据项创建一个 VNode。例如，这段代码：
<ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul>会被转换成类似这样的渲染函数代码：
import { renderList, createVNode, Fragment } from 'vue'; function render(_ctx, _cache) { return (createVNode("ul", null, renderList(_ctx.items, (item) => { return (createVNode("li", { key: item.id }, item.name)); }))) }简单解释一下：
renderList: 遍历_ctx.items数组，对每个item执行回调函数。- 回调函数的作用是为每个
item创建一个li元素对应的 VNode。 Fragment：一个特殊的 VNode 类型，用于包裹多个子节点。 如果不使用Fragment，则会报template需要一个根节点的错误。
第三幕：v-if 和 v-for 的爱恨情仇（嵌套场景）
现在，重头戏来了！ 让我们看看当 v-if 和 v-for 嵌套在一起时，compiler 会怎么处理。 这种情况比较常见，例如：
<div v-if="items.length > 0">
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>或者反过来：
<ul>
<li v-for="item in items" :key="item.id">
<div v-if="item.isActive">{{ item.name }}</div>
</li>
</ul>这两种情况，compiler 的处理方式略有不同。 我们先看第一种情况（v-if 包裹 v-for）。
-
v-if包裹v-for：在这种情况下，compiler 会先处理
v-if，然后再处理v-for。 也就是说，会先生成v-if对应的createBlock调用，然后在createBlock的true分支里，生成v-for对应的renderList调用。上面的例子会被转换成类似这样的渲染函数代码：
import { createBlock, createCommentVNode, renderList, createVNode, Fragment } from 'vue'; function render(_ctx, _cache) { return (_ctx.items.length > 0) ? (createBlock("div", null, [ createVNode("ul", null, renderList(_ctx.items, (item) => { return (createVNode("li", { key: item.id }, item.name)); })) ])) : (createCommentVNode("v-if", true)) }可以看到，
renderList调用被嵌套在createBlock的children数组里。 只有当_ctx.items.length > 0条件满足时，才会执行renderList，创建li元素。 -
v-for包裹v-if：在这种情况下，compiler 会先处理
v-for，然后再处理v-if。 也就是说，会先生成v-for对应的renderList调用，然后在renderList的回调函数里，生成v-if对应的createBlock调用。上面的例子会被转换成类似这样的渲染函数代码：
import { renderList, createVNode, createBlock, createCommentVNode } from 'vue'; function render(_ctx, _cache) { return (createVNode("ul", null, renderList(_ctx.items, (item) => { return (createVNode("li", { key: item.id }, [ (item.isActive) ? (createBlock("div", null, item.name)) : (createCommentVNode("v-if", true)) ])); }))) }可以看到，
createBlock调用被嵌套在renderList的回调函数里。 对于每个item，都会执行v-if的条件判断，决定是否渲染div元素。
第四幕：性能优化的小技巧
虽然 compiler 已经帮我们处理了 v-if 和 v-for 的嵌套，但是我们仍然可以通过一些小技巧来优化性能。
-
尽量避免在
v-for内部使用复杂的计算：v-for会遍历数据，为每个数据项创建一个 VNode。 如果在v-for内部进行复杂的计算，会导致性能下降。 最好把这些计算提前做好，然后在v-for中直接使用计算结果。 -
使用
key属性：key属性可以帮助 Vue 更好地追踪每个 VNode 的身份，从而更高效地进行更新。 在使用v-for时，一定要为每个元素指定一个唯一的key属性。 一般来说，可以使用数据项的 id 作为key。 -
考虑使用
v-show代替v-if：v-if会根据条件判断是否渲染元素。v-show则是始终渲染元素，只是通过 CSS 的display属性来控制元素的显示和隐藏。 如果你的元素需要频繁地显示和隐藏，可以考虑使用v-show来代替v-if，以避免频繁地创建和销毁 VNode。 当然，v-show也有缺点，它会始终占据 DOM 空间，即使元素是隐藏的。 所以，你需要根据实际情况来选择使用v-if还是v-show。
| 特性 | v-if |
v-show |
|---|---|---|
| 渲染方式 | 条件为真时渲染，否则不渲染 | 始终渲染，通过 CSS 控制显示/隐藏 |
| 性能 | 初始渲染开销可能较大，切换开销较小 | 初始渲染开销较小，切换开销较大 |
| 使用场景 | 不经常切换显示状态，或者初始渲染开销不敏感 | 频繁切换显示状态，且需要快速响应 |
| DOM 结构 | 条件不满足时，元素不存在于 DOM 中 | 元素始终存在于 DOM 中，只是 display 属性不同 |
第五幕：源码剖析（简化版）
为了更深入地理解 compiler 的工作方式，我们来简单看一下 Vue 3 源码中处理 v-if 和 v-for 的相关代码（简化版）。
-
v-if的处理：在
packages/compiler-core/src/transforms/vIf.ts文件中，可以看到vIf指令的处理逻辑。 简单来说，它会检查v-if指令的条件，然后生成一个条件渲染的 VNode。 -
v-for的处理：在
packages/compiler-core/src/transforms/vFor.ts文件中，可以看到vFor指令的处理逻辑。 它会解析v-for指令的表达式，然后生成一个renderList函数调用。
由于源码比较复杂，这里就不贴出完整的代码了。 感兴趣的同学可以自己去阅读 Vue 3 的源码。
第六幕：总结
好了，今天的讲座就到这里了。 我们一起学习了 Vue 3 compiler 如何处理 v-if 和 v-for 的嵌套。 希望通过今天的学习，你能更深入地理解 Vue 的运行机制，写出更高效的代码。
记住，v-if 和 v-for 就像一对欢喜冤家，用好了能让你的代码更加简洁优雅，用不好可能会导致性能问题。 所以，在使用它们的时候，一定要多加小心。
最后，感谢大家的聆听！ 如果有什么问题，欢迎随时提问。 祝大家编程愉快！