一个代表DOM树的对象,通常含有标签名,标签上的属性,事件监听和子元素们以及其他属性
优点
- 减少dom操作
a. 将多个dom操作合并为1次操作
b. 借助dom diff把多余的操作省掉 - 跨平台渲染
a. 本质上是一个js对象
缺点
额外创建函数
对比
在规模较小时虚拟DOM速度较快,但规模大了后其额外计算会导致速度变慢
逻辑
Tree diff
1. 将新旧两颗树逐层对比,找出哪些节点需要更新
2. 如果节点是组件就看 Component diff
3. 如果节点是标签就看 Element diff
Component diff
1. 如果节点是组件,就看组件类型
2. 类型不同直接替换
3. 类型相同则只更新属性
4. 然后深入组件做tree diff
Element diff
1. 如果节点是原生标签,只看标签名
2. 标签名不同直接替换相同则只更新属性
3. 然后进入标签后代做tree diff
缺点
DOM diff算法面对大量相同类型的节点变更时,会无法有效地复用已有的节点