第四章、虚拟DOM简介

• 虚拟DOM是将状态映射成视图的众多解决方案中的一种，它的作用原理是使用状态生成虚拟节点，然后用虚拟节点渲染视图。
• 之所以需要先试用状态生成生成虚拟节点，是因为如果直接用状态生成真实DOM，会有一定程度的性能浪费。如果先创建虚拟节点再渲染视图，就可以良虚拟节点缓存，然后使用新创建的虚拟节点和上一次渲染时缓存的虚拟节点进行比对，然后根据对比结果只更行需要更新的真实DOM节点，从而避免不必要的DOM操作，节省一定的性能开销。
• 由于Vue.js的变化侦测粒度很细，所以当状态发生变化时，Vue.js知道的信息更多，一定程度上可以知道哪些位置使用了状态。因此，Vue.js可以通过细粒度的绑定来更新视图，Vue.js1.0就是这样实现的。
• 但如此做会有一定的代价。由于粒度太细，就会有很多watcher同时观察某些状态，会有一些内存开销以及一些依赖追踪的开销，所以Vue.js2.0采取了一个中等粒度的解决方法，状态侦测不再细化到某个具体点，而是某个组件，组件内部通过虚拟DOM来渲染视图，这可以大大缩减依赖数量和watcher数量。
• Vue.js中通过模板来描述状态与视图之间的映射关系，所以它会先将模板编译成渲染函数，日前后执行渲染函数生成虚拟节点，最后使用虚拟节点更新视图。
• 因此虚拟DOM在Vue.js中所作的事就是提供虚拟节点vnode和新旧两个vnode进行比对，并根据比对结果进行DOM操作来更新视图。

模板转换成视图的过程图解：

虚拟DOM的执行过程图解：

查看专栏详情 立即解锁全部专栏