Vue源码 — 虚拟DOM & diff算法

虚拟DOM

定义：虚拟DOM是DOM的js抽象表示，它们是JS对象，可以表示DOM的结构和关系
优点：

• 虚拟DOM轻量（比真实DOM小的多）、快速；通过新老DOM的对比可以得到最小的DOM改动，配合异步更新策略（批量更新），从而提升性能；避免一边操作数据一边改DOM；
• 跨平台：在不同平台运行，就将虚拟DOM转换成对应的平台元素

必要性：vue1.0中监听的力度太细（每个响应式数据都有一个对应的watcher），导致响应式数据过多、过复杂时能存占用率飙升、开销太大，大型项目无法接收；因为在2.0当中采用一个组件一个watcher的形式来监听数据，在配合虚拟DOM、diff算法来进行对比和渲染，大大提升了性能，降低了内存的消耗。

diff算法

遵循原则：同层比较、深度优先
会进行节点、属性、文本的比较更新，其中属性更新非常粗暴，3.0中进行了优化，下次分析。

updateChildren函数：

• 建四个游标分别在两组数据的首尾，优先进行首首、尾尾、尾首、首尾的比较；
• 当发现数据一致时，首首、尾尾的情况会直接移动游标进行下一组数据对比，尾首的情况会将尾部数据移动到首部并移动游标，首尾的情况类似，移动首部数据到尾部并移动游标；
• 当上面四种情况都没有匹配到相同数据时，会老老实实的遍历查询，找到则移动数据到相应位置，找不到就轮空，最后老数据中剩下的数据会被删除，新数据中剩下的数据会进行创建并插入。

var arr = [1,2,3,4,5]
arr.splice(2, 0, 9) // [1, 2, 9, 3, 4, 5]
// [1, 2, 3, 4, 5]
// [1, 2, 9, 3, 4, 5]

// 第1次
// [2, 3, 4, 5]
// [2, 9, 3, 4, 5]

// 第2次
// [3, 4, 5]
// [9, 3, 4, 5]

// 第3次
// [3, 4]
// [9, 3, 4]

// 第4次
// [3]
// [9, 3]

// 第5次
// []
// [9]
// --》创建并插入9