谈谈Vue中的虚拟dom

Virtual DOM 是什么？

• Virtual DOM 是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，它是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。
• 模板 →（compile）→ 渲染函数 →(render) → 虚拟DOM树 →(create)→ 真实DOM的一个过程

Virtual DOM 作用是什么？

• 虚拟DOM的最终目标是将虚拟节点渲染到视图上

虚拟DOM在Vue.js主要做了两件事

• 提供与真实DOM节点所对应的虚拟节点vnode
• 将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图

为何需要Virtual DOM？

• 具备跨平台的优势
• 提高效率
• 提升渲染性能

diff 算法(patch的核心)

• 找出本次DOM需要更新的节点来更新，其他的不更新
• 基于snabbdom改造，仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新

diff 算法包括几个步骤

• 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
• 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
• 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了

diff 算法的实现过程

• patch(container,vnode) :初次渲染的时候，将VDOM渲染成真正的DOM然后插入到容器里面
• patch(vnode,newVnode):再次渲染的时候，将新的vnode和旧的vnode相对比，然后之间差异应用到所构建的真正的DOM树上