vue2.0为什么要新增虚拟dom

1. 什么是虚拟DOM

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

<ul id="list">
    <li class="item1">Item 1li>
    <li class="item2">Item 2li>
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('
Item 3
')

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

2. 虚拟DOM的利弊

• 内存：虚拟DOM需要将现有的DOM拷贝后保存在内存中，这是一个在DOM更新速度和内存使用的权衡。（vue1.0 没有引入虚拟DOM时更新速度反而快，那vue2.0为什么要引入虚拟DOM？处于内存的考虑，1.0的时候每次改变都会新建节点，比较耗内存）
• 并不使用所有情况：如果虚拟DOM可以一次性进行批量修改是非常好的，但是如果是单独的、稀少的更新是没有意义的。

因此如果某个项目有较少的节点，虚拟DOM反而使其更慢了。但是对于单页面应用来说，它还是可以提升性能的。

参考
vue2.0d的虚拟DOM渲染
Vue.js 2.0新增的虚拟DOM是怎么回事？