• vdom 是实现 vue 和 react 的重要基石

• diff 算法是 vdom 中最核心、最关键的部分

• DOM 操作非常耗费性能

• 以前用 JQ，可以自行控制 DOM 操作的时机，手动调整
• 数据驱动视图，如何有效控制 DOM 操作

解决方案 vdom

• 有了一定复杂度，想较少计算次数比较难
• 把计算，更多的转移为JS计算，因为JS执行速度快
• vdom 用JS模拟DOM结构，计算出最小的变更，操作dom

*用JS模拟DOM

<div id="div1" class="container">
  <p>vdom</p>
  <ul style="font-size: 20px">
    <li>a</li>
  </ul>
</div>

{
    tag: 'div',
  props: {
        id: 'div1',
      className: 'container'
  },
  children: [{
      tag: 'p',
    children: 'vdom'
  }, {
      tag: 'ul',
    props: {
        style: 'font-size: 20px'
    },
    children: [{
        tag: 'li',
      children: 'a'
    }]
  }]
}