什么是vnode

• vnode tree是对真实dom tree的一层抽象。
• 每个vnode节点对应真实dom的属性，它是一个Object对象，它用对象的属性来描述vnode节点。
• 每个vnode节点下的children依旧是vnode节点，与真实dom tree一一对应。

为什么需要vnode

• 真实dom包含了太多的属性，频繁的操作dom导致页面的重绘和回流，导致页面卡顿。
• 频繁的dom操作导致浏览器的解析引擎和渲染引擎频繁通信，消耗性能。
• 真实dom更新10次，会导致浏览器重新渲染10次，而虚拟dom是异步更新，只会渲染一次，提高页面渲染性能。
• 提供跨平台的能力，React-Native和weex

实现vnode

• vue通过createElement生成vnode，通过diff算法只渲染不同的部分到视图中。
• vue把template模板编译为render渲染函数，执行渲染函数后就生成vnode节点树。
• 通过diff算法后，订阅者watcher就会调用patch给真实的DOM打补丁。

挂载（mount）

• 一个运行时渲染器将会遍历整个虚拟 DOM 树，并据此构建真实的 DOM 树的过程。

更新（patch 或者 diffing）

• 如果我们有两份虚拟 DOM 树，渲染器将会有比较地遍历它们，找出它们之间的区别，并应用这其中的变化到真实的 DOM 上的过程

vue中虚拟dom渲染过程

image.png