深入理解 Vue 虚拟 DOM：原理、编译与渲染流程

虚拟 DOM 是什么？

虚拟 DOM 本质上是一个普通的 JavaScript 对象。在 Vue 组件挂载（mounted）阶段打印 this._vnode 即可查看该对象的具体内容，它用于描述视图界面的结构。

在 Vue 框架中，每个组件都包含一个 render 函数。每次调用 render 函数都会返回一棵虚拟 DOM 树，这意味着每个 Vue 组件都对应着一棵独立的虚拟 DOM 树。

VNode 是一个普通的 JavaScript 对象，它的作用是描述界面上应该呈现的内容。例如：

var vnode = {
  tag: "h1",
  children: [
    { tag: undefined, text: "第一个vue应用：Hello World"}
  ]
}

上述对象描述了：

有一个标签名为 h1 的节点，它有一个子节点，该子节点是一个文本，内容为「第一个vue应用：Hello World」

为什么需要虚拟 DOM？

在 Vue 中，视图渲染会调用 render 函数。这种渲染不仅发生在组件初始化创建时，也发生在视图所依赖的数据发生更新时。如果在每次渲染时直接操作真实 DOM，由于真实 DOM 的创建、更新和插入等操作会带来巨大的性能损耗，从而极大降低渲染效率。

因此，Vue 在渲染过程中使用虚拟 DOM 来替代直接操作真实 DOM，主要目的是为了解决渲染效率问题。

对比创建 JavaScript 对象与真实 DOM 对象的效率：

结果：

创建一个真实 DOM 会伴随创建大量属性，开销较大。

虚拟 DOM 是如何转换为真实 DOM 的？

当组件实例首次被渲染时，系统先生成虚拟 DOM 树，然后根据该虚拟 DOM 树创建真实 DOM，并将真实 DOM 挂载到页面中合适的位置。此时，每个虚拟 DOM 节点对应一个真实 DOM 节点。如果页面仅刷新一次且后续无数据更新，使用虚拟 DOM 的方式反而比直接显示真实 DOM 效率低。

若组件受响应式数据变化影响需重新渲染，系统会重新调用 render 函数，创建出一棵新的虚拟 DOM 树。通过对比新旧两棵树，找出差异部分，仅更新差异对应的虚拟 DOM 节点。最后，这些更新过的虚拟节点会去修改它们对应的真实 DOM。

这样一来，就保证了对真实 DOM 达到最小的改动。

模板和虚拟 DOM 的关系

Vue 框架中包含一个 compile（编译）模块，主要负责将模板转换为 render 函数，而 render 函数调用后将得到虚拟 DOM。

编译的过程分为两步：

1. 将模板字符串转换成为 AST（抽象语法树：用 JavaScript 树形结构来描述原始代码；在线工具：https://astexplorer.net/）

2. 将 AST 转换为 render 函数

Vue 模板并不是真实的 DOM，它会被编译为虚拟 DOM。

<div id="app">
  <h1>第一个vue应用：{{title}}</h1>
  <p>作者：{{author}}</p>
</div>

上面的模板会被编译为类似下面结构的虚拟 DOM

{
  tag: "div",
  children: [
    { tag: "h1", children: [ { text: "第一个vue应用：Hello World" } ] },
    { tag: "p", children: [ { text: "作者：袁" } ] }
  ]
}

如果使用传统的引入方式（script src="...vue.js"），则编译时间发生在组件第一次加载时，这称之为运行时编译。

如果是在vue-cli的默认配置下，编译发生在打包时(npm run build)，打包之后就没有模板只有 render 函数了，这称之为模板预编译。

编译是一个极其耗费性能的操作，预编译可以有效的提高运行时的性能，而且，由于运行的时候已不需要编译，vue-cli在打包时会排除掉vue中的compile模块，以减少打包体积

打包时是否需要包含 compile 模块，是通过 vue.config.js 中的 runtimeCompiler: true 来控制的，默认 false，不包含。不建议更改该配置

模板的存在，仅仅是为了让开发人员更加方便的书写界面代码

vue最终运行的时候，最终需要的是render函数，而不是模板，因此，模板中的各种语法，在虚拟dom中都是不存在的，它们都会变成虚拟dom的配置

在 vue-cli 中如果同时存在 template 和 render, 由于存在一个打包过程，其中的模板预编译会生成 render 覆盖原有的 render 函数

在 vue 中如果同时存在 template 和 render，一定是以 render 为准

虚拟 DOM 树会最终生成为真实的 DOM 树

vue通过以下逻辑生成vnode tree：

注意：虚拟节点树必须是单根的

注入

vue会将以下配置注入到vue实例：

• data：和界面相关的数据
• computed：通过已有数据计算得来的数据，将来详细讲解
• methods：方法

模板中可以使用vue实例中的成员

为了防止名称冲突。因为会将data中数据代理给vue，假如说我们自己写的data名称和vue中自带的属性冲突了，那么就会覆盖vue内部的属性，所以vue会把自己内部的属性成员名称前加上 或 ， 如 果 加 上 的 是 或_，如果加上的是 或，如果加上的是，代表是我们可以使用的，如果加上的是_，是vue自己内部使用的方法或属性，我们不需要调用

挂载

将生成的真实 DOM 树，放置到某个元素位置，称之为挂载

挂载的方式：

1.通过el:"css选择器"进行配置

2.通过vue实例.$mount(“css选择器”)进行配置

完整流程

• 实例被创建： new Vue()
• 注入完成之后才会有响应式，能监听到数据变化
• 编译生成虚拟 DOM 树：首先找 render 函数，没有就找模板把它生成 render，最后运行 render，生成虚拟 DOM 树
• 挂载完成：页面上显示

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注本站的更多内容!