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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: [译] Vue.js 内部原理浅析

原文:medium.com/js-imaginea…

说到 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(即 抽象语法树)。

parsing 阶段之后的 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。

优化后的 AST

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

Codegen 阶段

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

render function 的层次结构

在上图中,可以看到模板的层次结构已经被转换成了渲染函数的层次结构。基于 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 并删除附加其上的事件监听器或子组件时。



相关文章
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
27天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
28 1
|
27天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
66 1
|
1月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
1月前
|
JavaScript
Vue 双向数据绑定原理
Vue的双向数据绑定通过其核心的响应式系统实现,主要由Observer、Compiler和Watcher三个部分组成。Observer负责观察数据对象的所有属性,将其转换为getter和setter;Compiler解析模板指令,初始化视图并订阅数据变化;Watcher作为连接Observer和Compiler的桥梁,当数据变化时触发相应的更新操作。这种机制确保了数据模型与视图之间的自动同步。
|
1月前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
74 9
|
27天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0
|
3月前
|
缓存 JavaScript 前端开发
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
该文章全面覆盖了Vue.js从基础知识到进阶原理的48个核心知识点,包括Vue CLI项目结构、组件生命周期、响应式原理、Composition API的使用等内容,并针对Vue 2与Vue 3的不同特性进行了详细对比与讲解。
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
|
2月前
|
前端开发 JavaScript
深入理解JavaScript中的事件循环(Event Loop):从原理到实践
【10月更文挑战第12天】 深入理解JavaScript中的事件循环(Event Loop):从原理到实践
44 1
|
2月前
|
JavaScript UED
Vue双向数据绑定的原理
【10月更文挑战第7天】
下一篇
DataWorks