Vue2源码解析虚拟dom简介

1 什么是虚拟dom

2 为什么要引入虚拟dom

3 vue中的虚拟dom

4 总结

1 什么是虚拟dom

通过描述状态和dom之间的映射关系是怎样的，就可以将状态渲染成视图。

状态可以是js中的任意类型。Object、Array、String、Number、Boolean等都可以作为状态，这些状态最终会以段落、表单、按钮等元素呈现在用户界面上。

将状态作为输入，并生成dom输出到页面上显示出来，这个过程叫做渲染。

当某个状态发生变化时，只更新与这个状态相关联的dom节点。

虚拟dom的解决办法是：通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点树和上一次生成的虚拟节点树进行对比，只渲染不同的部分。

虚拟节点树其实是由组件树建立起来的整个虚拟节点树（vnode）。

2 为什么要引入虚拟dom

vue2.0开始选择用中等粒度的解决办法，那就是虚拟dom。组件级别是一个Watcher实例，就是说即使一个组件内有10个节点使用了某个状态，但其实也只有一个watcher在观察这个状态的变化。所以当这个状态发生变化时，只能通知到组件，然后组件内部通过虚拟dom去进行对比渲染。

3 vue中的虚拟dom

vue通过编译将模板转换成渲染函数(render)，执行渲染函数就可以得到一个虚拟节点树，使用这个虚拟节点树就可以渲染页面，如下图所示。

为了避免不必要的dom操作，虚拟dom在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的旧虚拟节点做对比，找到真正需要更新的节点来进行dom操作，从而避免操作其它无任何改动的dom。

虚拟dom在vue中主要做了两件事：

1.提供与真实dom节点所对应的虚拟节点vnode；

2.将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图。

虚拟dom最核心的算法是patch。

4 总结

先建立虚拟节点再渲染视图，就可以将虚拟节点缓存，然后使用新创建的虚拟节点和上次渲染时缓存的虚拟节点进行对比，然后根据对比结果只更新需要更新的真实dom节点，从而避免不必要的do操作。

vue2采用中等粒度解决方案，状态更新只侦测组件，组件内部通过虚拟dom来渲染视图，这可以大大缩减依赖数量和watcher数量。

vue中通过模板来描述状态与视图之间的映射管旭，所以它会先模板编译成渲染函数，然后执行渲染函数生成虚拟节点，最后使用虚拟节点更新视图。

注：本文章来自于《深入浅出vue.js》（人民邮电出版社）阅读后的笔记整理