关于前端:一文带你了解vue之虚拟dom

72次阅读

共计 1984 个字符，预计需要花费 5 分钟才能阅读完成。

—
在面试的过程中，可能也会被问到对虚构 dom 的了解，像这种面试题是比拟宽泛的，面试官想晓得你到底晓得多少？既然是 了解，那就只能是知无不言言无不尽, 尽量组织下语言多说点，这样才显得业余素养比拟高，接下来，我来谈谈本人的了解，切记不要去背，肯定要了解之后，用本人的语言来形容进去。

咱们能够从以下四个方面来答复：

虚构 dom 实质上就是一个一般的 JS 对象，用来形容视图上应该有哪些界面构造，并不生成界面。咱们能够在生命周期 mounted 阶段 打印一下this._vnode，如下：

形容了 标签为 div、有哪些属性 、以及 有哪些子元素 等等，它通过一般的 js 对象这种模式来形容页面上应该有哪些货色，但并不会生成界面。

在 vue 中，每个组件都有一个 render 函数，每一个 render 函数都会返回一个虚构 dom 数，这也就意味着每个组件都对应一棵虚构 DOM 树。

这个次要是由 vue 框架结构所决定的，在 vue 中，渲染视图会调用 render 函数，这种渲染不仅产生在组件创立时，而且还会产生在依赖的数据更新的时候。如果在渲染时，间接应用实在 DOM，因为实在 DOM 的创立、更新、插入等操作会带来大量的性能耗费，从而会极大的升高渲染效率。

示例：比照创立 js 对象和创立实在 dom 对象进行用时比照

<script>
      var times = 10000000;// 次数为 1000 万次
      //js 对象
      console.time(`js object`);
      for (var i = 0; i < times; i++) {var obj = {};
      }
      console.timeEnd("js object");
      // 实在 dom 对象
      console.time(`dom object`);
      for (var i = 0; i < times; i++) {var obj = document.createElement("div");
      }
      console.timeEnd("dom object");
</script>

运行后果：

从后果看，js 对象用时 150ms，而实在 dom 用时将近 7s 了，这个还不算插入到页面中导致的重绘重排工夫，十分恐怖！

因而，vue 在渲染时，应用虚构 dom 来代替实在 dom，次要为解决渲染效率的问题。那光有虚构 dom 也不可能啊，那页面咋显示呢？总不能是无字天书吧！接下来就是第三个方面了

在一个组件实例第一次被渲染的时候，它会学生成虚构 dom 树，而后依据虚构 dom 树创立实在 dom，最初会把实在的 dom 挂载到页面中适合的地位，所以说，创立实在的 dom 这一步是少不了的，只能说尽量的少创立，如果说页面只须要渲染一次，前面的数据变动都不从新渲染页面，这时 vue 的效率跟间接操作 dom 效率相比其实是更加低的，因为它比间接操作 dom 还多一个步骤：创立虚构 dom。第一次 vue 渲染效率是不高的，然而后续就不一样了。

如果一个组件受到响应式数据变动的影响，须要从新渲染时，它依然会从新调用 render 函数，创立一个新的虚构 dom 树，这时会用新虚构 dom 树 (newVnode) 和旧虚构 dom 树 (oldVnode) 进行比照，通过比对，vue 会找到最小更新量，而后更新必要的虚构 dom 节点，最初，这些更新过的虚构节点会去批改它们对应的实在 dom。这样一来就保障了对实在 dom 的操作达到了最小的改变。

比对过程其实是用到了一个算法，叫patch，它能够判断出哪些节点产生了变动，从而只对发生变化的虚构 dom 节点进行更新，对于 patch 我会专门出一篇文章谈谈本人的认识。

vue 框架中有一个 compile 模块，它次要负责将模板转换为 render 函数，而 render 函数调用后失去虚构 dom。

编译过程分为两步：

将模板字符串转换为 AST(Abstract Syntax Tree，形象语法树)
将 AST 转换为 render 函数

如果应用传统的引入形式（应用 script 标签引入 vue.js），编译工夫产生在组件第一次加载时，被称为 运行时编译。
如果是在 vue-cli 默认配置下，编译产生在打时，被称为 模板预编译。

编译 是一个极其消耗性能的操作，预编译能够无效的进步运行时的性能，而且，因为运行时曾经不须要编译，vue-cli 在打包时会排除掉 vue 中的 compile 模块，这样能够缩小打包体积。

模板的存在，仅仅只是为了咱们更加不便的书写界面代码，vue 最终运行的时候，最终须要的是 render 函数，而不是模板，这里要留神的是 vue 它是不意识模板的，模板是 vue-cli 预编译所须要的，它最终会将模板编译成 render 函数提供给 vue 失常运行。因而模板中的各种语法，在虚构 dom 中都是不存在的，它们都会变成虚构 dom 的配置。

😊 好了，以上就是我的分享，大家对于虚构 dom 还有其它了解的话能够在评论区探讨鸭～

记得点赞 👍 反对一下哦～ 😘

正文完