理解虚拟DOM是什么

虚拟DOM可以把它想象成一颗以JS对象作为基础的树，这棵树模拟了真实的DOM，再通过虚拟DOM树节点之间进行比较，从而实现DOM的操作与更新。再通过方法的转换，将它变成真实DOM。

在JS中，虚拟 DOM 表现为一个 Object 对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性。不同的框架对这三个属性的名命可能会有差别。

为什么需要虚拟DOM

如果我们在1000个节点中修改其中10个。原生JS操作DOM时，浏览器并不知道我们只有10个节点需要修改，因此它会将整个1000个节点全部替换一遍，这样做其实里面的990个节点都是在做无用功，白白浪费很多性能。而虚拟DOM就是为了节省不必要的流程而被设计出来。在1000个节点中如果只修改其中10个的话，虚拟DOM并不会直接去操作DOM，而是将这10个需要更新的节点内容保存在本地的JS对象中，直到需要执行时再将这个JS对象一次性插入到DOM树中，再对节点进行对比，找出真正需要更新的节点来进行DOM操作。这样做避免了重新操作无需改动的节点，从而使得性能有所提升。
虚拟DOM还可以跨平台使用。因为虚拟 DOM 不仅可以变成 DOM，还可以变成小程序、iOS 应用、安卓应用，因为虚拟 DOM 本质上只是一个 JS 对象

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

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

两个虚拟DOM树对比区别的算法即为DOM diff。diff 算法仅在两个树的同级的虚拟节点之间做比较，递归地进行比较，最终实现整个 DOM 树的更新

同级节点对比存在bug，会出现识别错误的问题

浏览器在对元素做比较的时候，首先会同级别进行比较。如下图，没有使用key的时候，你想把第二个方块删除掉，而结果却是留下了三角和方块，圆形却消失了

这是因为，计算机做了两件事：

给每个元素一个id作为key值（不能用index作为key ）

这样计算机就会这样做：