Vue 虚拟节点及diff算法详解

Vue进入2.0以来在其内部加入了虚拟dom的实现，减少了dom的操作，极大提高了性能，同时其diff算法的时间复杂度为O(n)，性能很高。

虚拟dom

首先我们来看下什么是虚拟DOM（virtual DOM ），虚拟DOM就是提通过js生成一个dom对象，之后通过diff算法比较之后生成patch，即补丁，之后虚拟dom通过补丁更新，再渲染成真实DOM显示出来，可以看到只涉及到了一次DOM操作，效率、性能无疑很高。

具体实现步骤：

• 初始化时创建虚拟dom树
• 将虚拟dom render成实体dom，显示出来
• 当前dom节点发生改变时，会生成新的虚拟dom（修改了旧dom）
• 新旧虚拟dom比对之后生成patch对象
• 根据patch对象更正旧虚拟dom，之后render

diff实现

明白了虚拟节点之后我们就以下面代码为例来详细说明下diff的具体操作：

<ul>
  <li>1</li>
  <li>2</li>
</ul>

在vue中就会生成虚拟dom结构，大概结构如下：

{
  tag: 'ul',
  children: [
    { tag: 'li', children: [ { vnode: { text: '1' }}]  },
    { tag: 'li', children: [ { vnode: { text: '2' }}]  },
    { tag: 'li', children: [ { vnode: { text: '3' }}]  },
  ]
}

假如此时我们对当前dom结构进行reverse操作的话，就会变成以下节点树：

{
  tag: 'ul',
  ch