为什么需要虚拟DOM？

- 虚拟DOM是什么？

一个普通的 JavaScript 对象，一个能代表DOM树的对象，通常含有标签名、标签上的属性、事件监听和子元素，以及其他属性。

- 虚拟DOM有什么缺点？

需要额外的创建函数，如createElement或h，但可以通过JSX来简化成XML写法。

- 为什么需要虚拟DOM？

1. 框架设计

2. 跨平台 浏览器环境才有真实DOM，所以弄了一个虚拟DOM，让所有的平台都可以渲染出来。

   DOM操作慢是对于JS原生API，如数组操作。 任何基于DOM的库（Vue/React）都不可能在操作DOM时比DOM快。

在某些情况下，虚拟DOM会比真实DOM快。

• 减少DOM操作

1. 虚拟DOM可以将多次操作合并为一次操作，比如你添加1000个节点，却是一个接一个操作的。
2. 虚拟DOM借助DOM Diff可以把多余的操作省掉，比如你添加1000个节点，其实只有10个是新增的。

• 跨平台

1. 虚拟DOM不仅可以变成DOM，还可以变成小程序，ios应用，安卓应用，因为虚拟DOM本质只是一个JS对象。

React

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

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

Vue

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

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