虚拟 DOM 的样貌

Vue

const vNode = {
  tag: "div", // 标签名 or 组件名
  data: {
    class: "red", // 标签上的属性
    on: {
      click: () => {} // 事件
    }
  },
  children: [ // 子元素们
    { tag: "span", ... },
    { tag: "span", ... }
  ],
  ...
}

React

const vNode = {
  key: null,
  props: {
    children: [  // 子元素们
       { type: 'span', ... }, 
       { type: 'span', ... }
    ],
    className: "red" // 标签上的属性
    onClick: () => {} // 事件
  },
  ref: null,
  type: "div", // 标签名 or 组件名
  ...
}

创建虚拟 DOM

Vue（只能在 render 函数里得到 h）

h('div', {
  class: 'red',
  on: {
    click: () => { }
  },
}, [h('span',{},'span1'), h('span', {}, 'span2'])

React.createElement

createElement('div',{className:'red',onClick:()=> {}},[
    createElement('span', {}, 'span1'),
    createElement('span', {}, 'span2')
  ]
)

用 JSX 简化创建虚拟 DOM

React JSX

<div className="red" onClick="{()=> {}}">
    <span>span1</span>
    <span>span2</span>
</div>

• [x] 通过babel转为createElement形式

  Vue Template

  <div class="red" @click="fn">
  <span>span1</span>
  <span>span2</span>
  </div>

• [x] 通过vue-loader转为h形式

那么这样写的缺点是什么：需要添加额外的构件过程（babel、vue-loader）

关于虚拟 DOM 的一些测试

• JS 创建1000个节点，慢的是浏览器渲染的时间慢（渲染过程，会导致 JS 不可交互）
• 当创建节点的数目没有到很恐怖的时候
• （比如10W个节点）JS（130ms就完成JS，大概2s才完成浏览器渲染，中间间隔的时间称之为不可交互时间）比虚拟DOM（Vue还是挺快的（大概3s），React需要30s，比较慢）更快
• 可能原因是：Vue本身就已经优化过，React没有优化

  总结：在节点数目没有到达很恐怖的数据时，虚拟DOM比原生的更快