虚拟DOM是什么?

一个能代表DOM树的对象,通常含有标签名、标签上的属性、事件监听和zi yuan su子元素们,以及其他属性

虚拟DOM有什么优点?

能够减少不必要的DOM操作
能够跨平台渲染

虚拟DOM的缺点

需要额外地创建函数,比如createElement(React)或者h(Vue),但是可以通过JSX来简化成XML写法

DOM diff是什么?

虚拟DOM的对比算法,就是一个函数,称之为patch。
patches = patch(oldVNode,newVnode)
patches就是要运行的DOM操作

DOM diff可能的大概逻辑

Tree diff

将新旧两棵树逐层对比,找出哪些节点需要更新
如果节点是组件就看 Component diff
如果节点是标签就看 Element diff

Component diff

如果节点是组件,就先看组件类型
类型不同直接替换(删除旧的)
类型相同则只更新属性
然后深入组件做Tree diff(递归)

Element diff

如果节点是原生标签,则看标签名
标签名不同直接替换,相同则只更新属性
然后进入标签后代做Tree diff(递归)

DOM diff的优点

1.减少DOM操作

2.跨平台

DOM diff的问题

同级节点对比存在bug,解决办法,添加key(在做Vue项目的时候有用到:key,现在知道为什么来)