专栏首页云前端[译] Vue.js 内部原理浅析

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

原文: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 个问题的答案:

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

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-forv-ifv-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.thenMessageChannel,实在不行就用 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) 的游戏。

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

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

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

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

生命周期钩子

让我们来讨论一下特定组件的生命跨度,并尝试把它们带入本文讨论的话题。

组件生命周期可被分为四个节段 --

  • 创建
  • 加载
  • 更新
  • 销毁

一旦 Vue 的新实例被执行,创建组件的过程就启动了。

beforeCreation: 收集组件所需的事件、数据之前。换句话说 -- 在收集 watchers/dependencies 的过程中。

created: 当 Vue 设置好 data 和 watchers 的时候。

beforeMount: 早于 patch 过程。VNode 正在基于 data 和 watchers 被创建。

mount: patch 过程之后。

beforeUpdate: 如果数据改变,watcher 会更新 VNode 并重新开始一次 patch 过程。

update: patch 过程完成时。

beforeDestroy: 卸载组件之前。此时,组件仍是全须全尾的。

destroyed: 销毁 watchers 并删除附加其上的事件监听器或子组件时。

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 更可靠的 React 组件:清楚易懂的可表达性

    原文摘自:https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-c...

    江米小枣
  • [译] 复用 Vue 组件的 6 层手段

    原文:https://michaelnthiessen.com/6-levels-of-reusability/?cksubscriberid=68763622...

    江米小枣
  • [译]: Vue.js 函数式组件:what, why & when?

    原文:https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439...

    江米小枣
  • 前端项目性能优化笔记

    饱暖思淫欲,当我们完成基本的业务需求之后,我们就需要去思考一下如何是我们的业务更加的流畅、代码更健壮等等,以下是我在项目中做的一些基本的项目优化工作,小小记录一...

    木子墨
  • 前端知识点总结——Vue

    作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

    CSDN技术头条
  • 快速学习-React 生命周期简介

    cwl_java
  • Angular学习(01)-架构概览

    官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主。

    请叫我大苏
  • 使用React Hooks进行状态管理 - 无Redux和Context API

    现在,我们将探索和开发一个自定义Hook来管理全局状态 - 比Redux更容易使用的方法,并且比Context API更高效。

    前端知否
  • JMeter(十四)-自动生成测试报告

    1:在你的脚本文件路径下,执行cmd命令:jmeter -n -t test.jmx -l result.jtl -e -o /tmp/ResultReport...

    飞天小子
  • vueRouter-Getting Started

    用Vue.js+vue-router创建单页应用是非常简单的。使用Vue.js,我们已经可以通过组合组件来组成应用程序,当你把vue-router添加进来,我们...

    tianyawhl

扫码关注云+社区

领取腾讯云代金券