虚拟DOM 系列（一）

JS 和 DOM 交互的效率很低

• Jquery 的出现虽然解决了 DOM 的绑定, 但是并没有解决频繁操作 DOM 的情况.
• 一个简单的 div 都有很多无用的属性
• JS和 DOM 之间进行沟通是有代价的，JS 是通过 JS 引擎，而 DOM 属于渲染引擎。这就类似于计算机中的 cpu 和硬盘，cpu 很快，但是硬盘很慢，所以有了缓存(划重点，虚拟 DOM 来了)。

看下面的两段代码

  <ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ol>

 {
    type: "ol", props:{id: "orderList"}, 
        children: [
            {type: "li", props: {}, children: ["item 1"]},
            {type: "li", props: {}, children: ["item 2"]},
            {type: "li", props: {}, children: ["item 3"]}
        ]
 }

我们是不是可以用JS对象表示DOM树的结构，注意以下两点

• 用JS对象表示DOM元素
• 用JS字符串表示文本节点

实现逻辑

• JS对象创建虚拟 DOM树 插入到文档中(vm)
• 状态变更时: 重新构建一颗虚拟 DOM 树, 比较两颗虚拟 DOM 树的差异(diff)
• 把差异更新到真正的 DOM 树(patch)