【一起读】深入浅出Vue.js——虚拟DOM

一句话总结本章内容：需求越来越复杂，DOM的操作变得越来越频繁，出于性能的考虑，使用虚拟DOM来模仿真实DOM的层级结构，通过比对新旧虚拟DOM节点的不同，局部操作DOM节点。

5.1.没有虚拟DOM的世界是什么样子

在虚拟DOM的概念出现以前，要改变页面展示的内容是通过遍历查询 DOM 树的方式找到需要修改的DOM，然后修改它的样式或者结构，来达到更新UI的目的。
众所周知，遍历消耗计算资源极大，每次对DOM进行修改都要遍历一遍整颗DOM树，业务越复杂，就会有越多的代码去操作DOM树，复杂的逻辑关系降低了代码的可读性、可维护性。

虚拟DOM就是用js对象来模拟DOM的结构，这样每次 DOM的修改就变成了对 js 对象里面属性的增删改查，比对js对象属性的变化跟比对DOM树的变化相比要简单的多，大大降低了性能开销。

5.2.如何使用虚拟DOM

三大主流框架Vue、Angular、React都是声明式的操作DOM。通过描述状态与DOM之间的映射关系将状态渲染为视图。当然，这些事情开发者都可以不用担心，状态到视图的转换过程，框架会帮我们处理好。但你想不想知道，三大框架究竟做了些什么？

用户点击了一个按钮，或者是进行一次数据请求，都会引起状态变化。而当状态发生变化时，如何判定状态中具体产生了什么变化以及哪些DOM节点需要更新？

最简单粗暴的方法是：不关心状态的具体变更也不在乎究竟是哪些DOM节点需要更新，而是一锅端的删除所有的节点，使用新状态重新构建一颗DOM树，然后渲染到页面。
不需要用脑子就知道这种方法没人会用。

三大框架针对优化DOM节点的比对的问题提出的解决方案各有千秋。

Angular依然是强大的脏检查，在不知道哪些状态变了的情况下，去做暴力比对。
React与Angular一样不清楚哪些状态发生了变化，它先是构造了虚拟DOM，然后使用Diff算法去比对新旧两棵DOM树的节点。
Vue的变化侦测是能在一定程度上知道哪些状态发生了变化的，不需要做对比，就知道哪些节点需要更新。Vue1.0就是这样实现的，但是Vue1.0的粒度很小，每个状态的变化都绑定了一个watcher来监测，这种方式的代价会有一些内存的开销和一些依赖追踪的开销，当项目很大时，有很多的节点需要监测时，这个开销就很大了。Vue2.0以后，引入了虚拟DOM，并且以组件为粒度，一个组件通过一个watcher来监测，这样的话，状态发生变化时，组件内通过虚拟DOM去做节点对比与渲染。

5.3.Vue2.x的具体实现

虚拟DOM在Vue2.x中只做了两件事：

• 构建与真实DOM对应的虚拟节点vnode
• 新vnode与旧vnode进行比对，然后渲染视图。

vnode是一个普通的js对象，用于描述真实的DOM节点，关于新旧vnode的对比，vue2.x使用了patch算法，它可以判断出哪些节点发生了变化，从而只对发生变化的节点进行更新。

5.4.补充内容

为什么操作真实DOM的成本比较高？

• DOM 树的实现模块和JS模块是分开的，这些跨模块的通讯增加了成本
• DOM 操作引起的浏览器的回流和重绘，使得性能开销巨大。

浏览器收到一个HTML页面是如何解析成页面呈现给用户的呢？

1. 解析HTML：会按顺序解析。浏览器有专门的HTML解析器来解析HTML，并在解析的过程中构建DOM树
2. 构建DOM树：它和步骤1是同步进行，可以理解为边解析边构建。
3. 构建呈现树RenderTree：将DOM树与CSS结合，也就是将样式应用到DOM节点上
4. 布局：计算呈现树节点的大小和位置，这一位置是递归进行的。
5. 绘制：布局完成后，便是将呈现树绘制出来显示在屏幕上。

什么是回流和重绘？

• 回流 Reflow:当呈现树RenderTree中的一部分或全部因为尺寸、布局、隐藏等改变改重新构建，称之为回流。
• 重绘：当呈现树RenderTree中的一部分元素需要更新属性，而属性只会影响外观、风格而不影响布局，比如颜色、字体大小等，则称之为重绘。

后话：这节只是个引子，Vue虚拟DOM的重头戏在patch算法的实现上。