[译] Vue.js 内部原理浅析

江米小枣

发布于 2020-06-15 20:14:15

1.2K0

发布于 2020-06-15 20:14:15

原文：https://medium.com/js-imaginea/the-vue-js-internals-7b76f76813e3

说到 JavaScript 框架，Vue.js 绝对是个热门的 UI 框架（译注：截至本文翻译时其 Github 155k ⭐️ & 23k ?, 关注数已经超过了 React）。于我来说 Vue.js 最吸引人的地方在于 -- 其学习曲线，非常之低。个人角度来讲，我感觉就像正在做着 jQuery 一类的事情。鼓捣几天之后，你就能开始建立应用了。

一年前我开始探索 Vue.js 并建立了一些应用。但是几天前，一股深入了解 Vue.js 代码的渴望在我心中升腾。我翻阅了 Github 上的源码并进行了多轮调试以了解其底层运行机制。这也是本文中我要写的东西。

所以，让我们来点干货，本文将尝试给你如下 4 个问题的答案：

当你创建一个 Vue.js 实例时发生了什么？
模板内部都在发生着什么？
Virtual DOM 有何意义？
当一个属性改变时模板是如何再次渲染的？

Vue 组件中包含一个模板（template），而模板在出现在浏览器里之前必须经历多个阶段。我们来编写一个短小的模板，并以之作为一个例子驱动本文的进行。

<div id="app">
  <span v-if="dynamic">Dynamic text</span>
  <span><p>Static text</p></span>
  <button @click="toggleFlag">Toggle Dynamic</button>
</div>

组件的 JS logic 就不写出来了，因为模板本身已经可以自解释。

编译阶段

Vue compiler 读取一个组件的模板，使之经历下图所示的 parsing、optimizing、codegen 阶段并最终创建一个渲染函数。该渲染函数的职责就是创建一个 VNode，而该 VNode 会被 Virtual DOM 的 patch 过程用来创建真实 DOM。

解析阶段

在编译的这个阶段对特定组件中的置标语言模板进行解析。正如你能在下图中见到的，首先 parser 会将模板解析成 HTML parser，随后转成 AST（即抽象语法树）。

AST 包含了诸如 attributes、parent、children、tag 等等的信息。解析过程中也会将 directives 以类似元素的方式处理。诸如 v-for、v-if、v-once 等结构化的 directives 会被表现为一个特定元素 AST 中的 key-value 对。如我们模板中的 v-if，在解析后将被推入 attrsMap 中变成形如 {v-if: “dynamic”} 的对象。

优化阶段

optimizer 的目标就是遍历生成的 AST 并探测纯静态的子树，即 DOM 中不会改变的那些部分。如下图所示，这些元素将被标记为 static。

一旦检测到静态子树，Vue 便将其提升为常量，从而不会在每次重新渲染时为其生成新鲜的节点。这些节点也会在 Virtual DOM 的 patch 过程中被完全地跳过。

Codegen 阶段

编译的最后一个阶段就是 Codegen，该阶段将创建真正的渲染函数以用于 patch 过程。

在上图中，可以看到模板的层次结构已经被转换成了渲染函数的层次结构。基于 optimizer 打过的 static 标记，Codegen 将渲染函数分叉为两个独立的函数。一个是普通的渲染函数，另一个是静态渲染函数。

最后，当真正的渲染过程触发时，渲染函数将被用于创建 VNode。

注意：如果你使用了一个构建步骤，如单文件组件时，模板的编译将提前发生。

observer 和 watcher — 反应式组件

Observer

Vue 会在底层遍历所有我们定义在 data 中的属性，并通过 Object.defineProperty 将它们转换为 getter/setters。

当任何 data 属性得到一个新值时，set 函数将会通知 Watchers。

Watcher

当一个 Vue 应用被初始化时，会为每个组件创建一个 Watcher。Watcher 会解析一个表达式，收集订阅者并在表达式的值变化时触发回调。这个做法被同时用在了 $watch API 和 directives 上。每个组件实例都有一个相应的 watcher 实例，用以将渲染组件期间“触及”的任何属性记录为依赖项（译注：在 getter 里收集会访问到的依赖数据）。其后，当一个依赖项的 setter 被触发，它就会通知到 watcher，并最终触发 patch 过程。

无论何时，当一个数据的改变被观察到，就会开启一个队列并缓存本轮事件循环中发生的所有数据改变。所有 watchers 都被添加到此队列中。每个 watcher 有一个独特的自增 Id，这样如果相同的 watcher 被触发多次，它只会在被使用前被推送到队列中一次。因为 watchers 要以从 parent 到 child 的顺序运行，所以队列也会被排序。

在内部，Vue 会为异步排队尝试使用原生的 Promise.then 和 MessageChannel，实在不行就用 setTimeout(fn, 0)。

nextTick 函数会消耗掉队列中的所有 watchers。在那之后，渲染过程将通过 watcher 的 run() 函数被初始化。

patch 过程

patch 过程基本上就是一个使用 Virtual DOM 和真实 DOM 高效交互的过程。一个 Virtual DOM 就是表示一个 DOM（文档对象模型 - Document Object Model）的 JavaScript 对象。Vue.js 在内部使用了 snabbdom 库。所以，让我们看看 patch 过程中到底发生了什么。

整个过程就是个关于两相对比新旧 VNode (Virtual DOM Node) 的游戏。

其算法将以如下方式运行 --

首先检查旧 VNode 是否存在，若不存在则为每个 VNode 创建 DOM 元素。当你首次登录到应用中并且第一次渲染过程初始化时，就是旧 VNode 不存在的时候。
反过来说，如果旧 VNode 存在的话，比较新旧 VNode 的 children 的过程就将启动 -- 普通的节点将在 DOM 中保持原状，新节点将被添加，而旧的且不匹配的节点将从 Virtual DOM 和真实 DOM 中同时移除。
另外如果有必要的话，匹配节点的样式、class、dataset 和事件监听器也会被更新或删除。

相同的过程会递归式地应用到所有节点上。

此外，我得提醒你一些事情 -- 静态节点，我们在优化阶段讨论过的。静态节点树并不会被触及，并被原样使用。这意味着 -- 我们并不需要对这种树与真实 DOM 交互。