Vue 源码剖析（四）：模板编译与渲染函数的玄妙世界

2023-12-03 10:36:23

Vue 源码剖析（四）：模板编译与渲染函数的玄妙世界

在前端开发中，我们通过写 HTML 代码来实现页面的结构，我们称这些 HTML 代码为模板。在 Vue 中，模板先通过模板编译转换成渲染函数，当内部状态发生变化的时候，Vue.js 会结合响应式系统，找出最小数量的组件进行重新渲染以进行最少量的 DOM 操作。

从这张图中，我们可以看到 Vue 的模板是如何一步步转换成渲染函数的：

[图片]

模板编译：

模板编译器将模板中的 HTML 代码解析成抽象语法树（AST），这个 AST 是一个由对象构成的树形结构，它代表了模板中各种元素的层次关系。
AST 优化：

在生成 AST 之后，Vue 会对 AST 进行优化，比如去除不必要的节点，合并相邻的文本节点等，以减少渲染函数的体积和提高渲染效率。
生成渲染函数：

优化后的 AST 会被转换成一个 JavaScript 函数，这个函数就是渲染函数。渲染函数是一个纯函数，它接收一个组件实例作为参数，并返回一个虚拟 DOM（Virtual DOM）。
虚拟 DOM 渲染：

虚拟 DOM 是一个轻量级的 DOM 对象，它与真实 DOM 非常相似，但它是用 JavaScript 对象表示的。Vue 会将虚拟 DOM 与上一次渲染生成的虚拟 DOM 进行比较，找出差异，然后将这些差异应用到真实 DOM 上，以实现最少量的 DOM 操作。

Vue 的模板编译和渲染函数是如何工作的？

在 Vue 中，模板编译和渲染函数是如何协同工作，从而实现高效的组件重新渲染和最少的 DOM 操作的呢？

模板编译：

当 Vue 组件被创建的时候，Vue 会先将组件的模板编译成渲染函数。这个过程是只执行一次的，在组件的生命周期中只会执行一次。
响应式系统：

Vue 的响应式系统会监听组件内部状态的变化，当状态发生变化的时候，Vue 会标记相应的组件为需要重新渲染。
渲染函数：

当需要重新渲染的组件被标记之后，Vue 会调用组件的渲染函数，并传入组件实例作为参数。渲染函数会返回一个虚拟 DOM。
虚拟 DOM 渲染：

Vue 会将新生成的虚拟 DOM 与上一次渲染生成的虚拟 DOM 进行比较，找出差异，然后将这些差异应用到真实 DOM 上，以实现最少量的 DOM 操作。