1、什么是虚拟dom

Virtual DOM其实就是一颗以JavaScript对象作为基础的树,用对象属性来描述节点,实际就是真实dom的抽象。最终通过一系列操作使这课树映射到真实环境上。它描述了应该如何船舰一个真实的DOM节点。

2、vue为什么使用虚拟dom

创建真实DOM的代价高
真实的DOM节点(node)实现的属性很多,而虚拟节点(vnode)仅仅实现一些必要的属性,相比至下,创建一个vnode的成本低。不会覆盖,重绘,节点。他会找到真正有变化的节点对其进行修改。例如:一个ul标签下面有很多li标签,其中一个li编号,这种情况下如果使用新的ul替换旧的ul那么就会有不必要的浪费。

3、vue中虚拟dom的实现过程

vue通过编译将template模板转换成渲染函数(render),执行渲染函数生成一个vnode(虚拟节点树)。又会通过patch函数对新旧虚拟DOM进行对比找出变化的节点,对齐进行修改。

对model进行操作的时候,会触发对应Dep中的watcher对象来修改视图,修改内容通过patch对比新旧vnode后的差距结果进行DOM渲染。

patch核心diff算法
diff

diff值能在同层进行比较。