如何理解Virtual DOM

[wangyong315]

虚拟dom

js模拟dom结构，将dom变化的对比放在js层来做。换而言之，vdom就是js对象。

<ul id="list">
<li class="item">ITEM1</li>
<li class="item">ITEM2</li>
</ul>

映射成虚拟dom就是这样

{
  tag: "ul",
  attrs: {
    id: "list"
  },
  children: {
    {
      tag: 'li',
      attrs: { className: "item" },
      children: [ "ITEM1" ]
    },
    {
      tag: 'li',
      attrs: { className: "item" },
      children: [ "ITEM2" ]
    }
  }
}