【Vue】虚拟 DOM 和 diff 算法

一、虚拟 DOM 

转载原文：vue2.0为什么要新增虚拟dom

1. 什么是虚拟 DOM

所谓虚拟DOM, 其实就是用js来模拟DOM结构，把DOM的变化操作放在js层来做，尽量减少对DOM的操作（原因应该是操作js比操作DOM的速度快许多）。然后对比前后两次虚拟DOM的变化，只重新渲染变化了的部分，而没有变化的部分则不会重新渲染。比如，我们有以下DOM结构：

<ul id="list">
    <li class="item1">Item 1</li>
    <li class="item2">Item 2</li>
</ul>

用js对象模拟上面的DOM结构：

var vdom = {
   tag: 'ul',
   attr: {
      id: 'list',
   },
   children: [
      {
         tag: 'li',
         attr: {
            className: 'item',
            children: ['Item 1']
         },
      },
      {
         tag: 'li',
         attr: {
            className: 'item',
            children: ['Item 2']
         }
      }
   ]
}

注：js模拟的DOM结构并没有模拟所有DOM节点上的属性、方法（因为DOM节点本身属性非常多，这也是DOM操作耗性能的一个点），而是只模拟了一部分和数据相关的属性和方法。

//this might be how we update the virtual DOM
vdom.children.push('<ul>Item 3</ul>')

如果我们使用虚拟DOM，而不是直接在代码中调用类似 .getElementById 的 DOM API 方法，操作就会像改变 JS 对象一样非常的简单省时。

2. 虚拟DOM的利弊

• 从内存占用的角度出发，虚拟DOM需要将现有的DOM拷贝后保存在内存中，故会占用一定大小的内存。但如果在新建的节点比较多的情况下，不使用虚拟DOM将会比使用虚拟DOM占用更多的内存。所以这也是为什么vue2.0要引入虚拟DOM？它是出于内存的考虑。
• 从更新速度的角度出发，vue1.0 在没有引入虚拟DOM时更新速度反而更快。

3. 当数据发生变化时，vue是怎么更新节点的？

我们先根据真实DOM生成一棵virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

二、diff 算法

转载原文：详解vue的diff算法

传统 diff 算法 的时间复杂度是O(n^3)；在 vue 和 react 中，diff 算法的时间复杂度是 O(n)。

比较步骤：

1. oldStartVnode, newStartVnode

2. oldEndVnode, newEndVnode

3. oldStartVnode, newEndVnode

4. oldEndVnode, newStartVnode

示例如下：

END