vue的虚拟DOM和diff原理

###vue的虚拟DOM和diff原理

        Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可以访问到对应的Node。

vdom因为是纯粹的JS对象，所以操作它会很高效，但是vdom的变更最终会转换成DOM操作，为了实现高效的DOM操作，一套高效的虚拟DOM diff算法显得很有必要。

vdom: 双向绑定虚拟dom。下面是vue的diff算法参考图

一、简单的diff设计：

遍历newVdom的节点，找到他在oldVdom中的位置，找到就移动对应的dom元素，没找到说明是新增节点，则创建一个节点插入。遍历完后如果oldVdom中还有没有处理过的节点，说明这些节点在newVdom中被删除了，删除它们即可。

二、Vue的diff实现：

1、优先处理特殊场景

（1）、头部的同类型节点、尾部的同类型节点

这类节点更新前后位置没有发生变化，所以不用移动它们对应的DOM

（2）、头尾/尾头的同类型节点

这类节点位置很明确，不需要再花心思查找，直接移动DOM就好

处理了这些场景之后，一方面一些不需要做移动的DOM得到快速处理，另一方面待处理节点变少，缩小了后续操作的处理范围，性能也得到提升

2、“原地复用”

“原地复用”是指Vue会尽可能复用DOM，尽可能不发生DOM的移动。Vue在判断更新前后指针是否指向同一个节点，其实不要求它们真实引用同一个DOM节点，实际上它仅判断指向的是否是同类节点