Vue 源码解析：v-if/v-for 指令与渲染函数生成

Vue 源码解析：模板编译 v-if 与 codegen（五）

写在前面

v-if/v-for 指令在日常开发中十分常用。本文将通过分析 Vue 如何处理这两种指令，来梳理前四篇模板编译文章，并完成最后的 codegen 过程。

前置回顾

在之前的文章中，我们了解了 HTML 解析的过程，也就是如何将模板字符串解析为 AST（抽象语法树）。parseHTML 利用正则逐个解析 template 字符串，构建 AST。

v-if 指令

v-if 指令用于根据条件渲染元素。它需要一个表达式作为参数，当表达式为真时，渲染元素，否则不渲染。

<div v-if="show">
  ...
</div>

Vue 在解析到 v-if 指令时，会创建一个 IfConditionalBlock AST 节点。该节点包含表达式的 AST 节点，以及对应元素的 AST 节点。

v-for 指令

v-for 指令用于遍历数组或对象，并为每个元素渲染一个元素。它需要一个表达式和一个 in 作为参数，表达式指定遍历的数组或对象，in 关键字指定遍历的元素。

<div v-for="item in items">
  ...
</div>

Vue 在解析到 v-for 指令时，会创建一个 ForRenderList AST 节点。该节点包含表达式的 AST 节点，遍历元素的 AST 节点，以及对应元素的 AST 节点。

codegen 过程

codegen 过程将 AST 转换为渲染函数字符串。在转换 v-if 和 v-for 指令时，Vue 会根据 AST 节点的类型生成不同的代码。

对于 IfConditionalBlock AST 节点，Vue 会生成以下代码：

if (show) {
  return createElement(element.tag, element.data, element.children);
} else {
  return null;
}

对于 ForRenderList AST 节点，Vue 会生成以下代码：

return (
  (items).map(function (item) {
    return createElement(element.tag, element.data, element.children);
  })
);

总结

通过分析 Vue 如何处理 v-if 和 v-for 指令，我们梳理了前四篇模板编译文章，并完成了最后的 codegen 过程。这有助于我们理解 Vue 模板编译的原理，以及如何利用 Vue 构建复杂而动态的 UI。