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