虚拟DOM是啥
虚拟DOM其实就是一个与真实DOM相对的一个对象，通常含有标签名，标签上的属性，事件监听，子元素等
虚拟DOM的优缺点
- 优点
可以减少DOM操作，类似于实现并行操作
可以借助DOM diff算法，省略多余的操作，例如重复添加同一个节点
可以实现跨平台，因为虚拟DOM不是真实DOM，而只是一个JS对象 - 缺点
需要创建额外的函数，在React框架下是createElement函数，在Vue下则是h函数
不过在React下可以通过JSX语法，简化为XML写法
DOM diif是啥
一个虚拟DOM的对比算法，其实就是一个被称为patch的函数
patches = patch(oldVNode, newVNode)
DOM diff的大概逻辑
- Tree diff
逐层对比old和new两棵树，找出需要更新的节点
如果节点是组件，就去看Component diff
如果节点是标签，就去看Element diff - Component diff
先看组件的类型，如果类型不同，则直接删除旧的，并替换上新的
如果类型相同就直接更新组件属性，然后再进入组件去做Tree diff - Element diff
先看标签名，如果标签名不同就直接替换，相同则更新属性
再进入标签的后代去做Tree diff
DOM diff的优点和问题
- DOM diff作为一个DOM更新的算法，可以减少更新时的操作步骤，不需要全部重新
- 但是DOM diff在同级比较的时候存在bug（由于计算机遍历的机制），所以需要加上唯一的key，让计算机不要搞错了操作的是哪个节点
