Vue虚拟DOM

1.虚拟DOM是什么

一句话总结：通过状态生成虚拟的节点树，然后使用虚拟节点树和真实DOM树进行比较，进而渲染不同的部分
（状态即数据）
随着时代发展，页面上的操作越来越频繁，状态的变化就会变的越来越多，那么代码中很多代码是在操作DOM，程序中的状态很难管理，逻辑会显得很乱。
三大主流框架Vue.js、Angular和React都是声明式操作DOM。通过描述状态和DOM之间映射关系，就可以将状态渲染成视图。

2.为什么需要虚拟DOM

1.频繁访问DOM的代价是很高的，每当状态发生变化，整个DOM树都需要重新渲染，而往往在DOM中只有一个节点的状态发生了变化。因此我们需要做到哪里发生变化重新渲染部分节点–这就需要新生成的DOM与上一次生成的虚拟DOM做比较，得出不同的部分去渲染。
2.第二个原因是因为DOM操作的执行速度远低于JS的运算速度，因此我们如果计算出真正需要更新的节点，这样极大减少了DOM的操作可以显著提升性能。
3.跨平台特性。通过虚拟DOM结合渲染器能够更好适配不同平台，抹平不同平台的差异。
虚拟节点树实际由组件树建立起来的整个虚拟节点。

3.三大主流框架在虚拟DOM上的差别

Angular和React的变化侦测相同点：因为没有向Vue一样细粒度的侦测，React是暴力比对Angular使用脏检查的方法（称为“脏检查”是因为在Angular中使用dirty变量做记录，当遍历属性发现与之前对比有变化dirty就记录为true）。
而Vue在很大程度上知道具体哪些状态发生了变化，但这样粒度太细每一个绑定的都会有一个对应的watcher来观察状态的变化，这样会有很多依赖追踪和内存开销，大型项目而言这个开销太大。
Vue在2.0做了优化，选择了中等粒度的方案，引入虚拟DOM。组件级成为一个watcher实例，即一个watcher观察一个组件内部的状态变化

4.Vue中的虚拟DOM

在Vue中我们使用模板来描述状态与DOM之间的映射关系。
1.Vue通过编译complier将模板转化为渲染函数render。
2.执行渲染函数就可以得到一个虚拟节点树。
3.然后使用该虚拟节点数来渲染页面。
那为什么不直接将虚拟节点覆盖旧节点呢？
因为：如果一个ur标签下的许多个li标签，li标签中只有一个li发生变化，这种时候如果我们用新的ul替换旧的ul会造成其他没发生变化的li进行不必要的渲染。
虚拟DOM做了两件事
1.提供一个与真实DOM节点所对应的虚拟节点。
2.将新的虚拟节点和旧的虚拟节点作比较，找到不同的地方进行渲染。