虚拟DOM以及Diff算法
- 虚拟DOM
- 就是一个普通的js对象，用来描述一个真实的DOM结
- 虚拟dom好处
- 提升性能减少不必要的DOM更新，避免频繁重绘和回流 可以实现跨平台
- 什么是diff算法
- diff算法：初始化的时候会有一份虚拟DOM树，当数据更新的时候，又会生成一份新的虚拟DOM树，新旧DOM树根据key值进行比对找差异，然后更新真实的DOM树，我们就这个比对的过程称为diff算法
- diff算法的具体比较规则：
- Vue的diff算法是同级比较，不考虑跨级比较的情况。内部采用深度递归的方法+双指针比较，时间复杂度如果是穷举法是O(n2),但是用了这种算法时间复杂度就是O(n)
- 什么是key：
- 用index作为key可能会引发的问题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序的操作：
- 会产生没有必要的真实DOM更新 ===> 界面效果没问题，但效率低。
- 如果结构中还包括输入类的DOM：
- 在开发中如何选择key？：
- 最好使用每条数据的唯一标识动作作为key，比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
具体比较规则：
- 判断新节点和旧节点是否是同一个节点，判断key的值是否相同，并且标签名是否相同
- 如果不是同一节点，新节点直接替换老节点，删除旧的、插入新的
- 如果新旧节点是同一个节点时，会进行子节点的双端指针比较
