虚拟 DOM &DOM diff

虚拟 DOM 是什么
一个能代表DOM树的对象，通常含有标签名、标签上的属性、事件监听、子元素，以及他们的属性

虚拟 DOM 的优点

1. 减少不必要的DOM操作

• 虚拟DOM可将多次操作合并成一次完成，比如：当需要添加1000个节点时，真实DOM需要一个一个的添加，但是虚拟DOM比如vue可以将多个节点放在一个页面一次性添加。
• 虚拟DOM可以借助DOM diff将多余的操作省掉，比如需要添加1000个节点，但是只有10个节点是新增的，虚拟DOM可以通过diff算法，实现只对新增的10个节点进行添加，其他节点不需要改动。

2. 跨平台渲染

• 虚拟DOM不仅可以变成DOM，还可以变成小程序，IOS应用

虚拟 DOM 的缺点
需要额外的创建函数来创建DOM树，如createElement或h，但是可以通过JXS来简化成XML写法。

DOM diff 是什么
是一个函数，是虚拟DOM的对比算法

1. Tree diff

• 将新旧两颗虚拟 DOM 树,按照层级对应的关系,从头到尾的遍历一遍,就能找到那些元素是需要更新的

2. Component diff

• 组件类型相同,暂时不更新，继续对比
• 类型不相同,就需要更新; ( 删除旧组件,再创建新组件并插入)

3. Element diff
   -在类型相同的组件内, 再继续对比组件内部的元素,查看内部元素是否相同并更新

DOM diff 的优点
通过将新的DOM树和旧的DOM树进行比较，只对变化了的部分进行渲染，提高了渲染效率

DOM diff 的问题
同级比较存在Bug
解决方法：用Key值进行区分