虚拟 DOM

虚拟DOM

虚拟DOM其实是一个表示DOM树的JS对象，通常含有标签名、标签上的属性、事件监听、子元素们和其他属性。

• 优点

1. 减少DOM操作：可以将多次操作合并为一次，也可以将多余的操作省掉。
2. 跨平台：虚拟DOM不仅可以变成DOM，还可以变成小程序，IOS应用，安卓应用，因为虚拟DOM本质上就是一个JS对象。

• 缺点

  需要使用额外的创建函数（React的createElement函数,Vue的h函数），不过可以通过JSX简化成XML写法

  但是使用JSX需要添加额外的构建过程，因为使用JSX就会严重依赖打包工具，不打包JS就不认识。

React的虚拟DOM

const vNode = {
  key: null,
  props:{
    children:[
      {type:'span',...},
      {type:'span',...}
    ],
    className:'red',
    onclick:()=>{}
  },
  ref:null,
  type:'div',   //标签名 或 组件名
  ...
}

//创建虚拟DOM
// 1 传统
React.createElement('div',{
  className:'red',onClick:()=>{}
  },
  [    React.createElement('span',{},'span1'),    React.createElement('span',{},'span2')  ]
)

// 2 使用React JSX  通过babel转为createElement
<div className = 'red' onClick = {fn}>
  <span>span1</span>
  <span>span2</span>
</div>

Vue的虚拟DOM

const vNode = {
  tag:'div',
  data:{
    class:'red',
    on:{
      click:()=>{}
    }
  },
  children:[
    {tag:'span',...},
    {tag:'span',...}
  ],
    ...
}

//创建虚拟DOM
//Vue只能在render函数中得到h
// 1 传统
h('div',{
  class: 'red',
  on: {
    click:()=>{}
  },
},
  [ h('span',{},'span1'),
    h('span',{},'span2')]
  )

// 2 使用Vue Template  通过vue-loader 转为 h 形式
<div className = 'red' @Click = 'fn'>
  <span>span1</span>
  <span>span2</span>
</div>