经典vue难点----v-for中的key和diff算法

引言

今天学习了v-for中的key和diff算法之间的关系，了解了vue是如何高效的渲染DOM。

v-for中的key

官方的解释

• key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes
• 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法
• 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；
• 好难理解！！！！直接上案例

案例

在这里插入图片描述

• 在[a,b,c,d]中插入f，有三种方法：
  • 数组变了，重新v-for循环
  • a,b不变，c变f ,d变c,然后新增一个d
  • a,b,c,d都不变，直接新增一个f
• 显然第三种方法是最高效的
• Vue事实上会对于有key和没有key会调用两个不同的方法
  • 有key，那么就使用 patchKeyedChildren方法
  • 没有key，那么久使用 patchUnkeyedChildren方法

上源码

Vue源码对于key的判断

在这里插入图片描述

没有key的操作（源码）

在这里插入图片描述

在这里插入图片描述

• 没有key的操作会分为三步
  1. 先获取新旧节点的长度并且去最小长度
  2. 遍历长度小的节点，对新旧节点依次patch（容易理解点就是对比节点类型和内容）
  3. 判断新旧长度，若旧的短，则新增节点，反之删除节点

有key执行操作（源码）

在这里插入图片描述

• 共分为5步
  1. 从头开始进行遍历、比较，若key不一致，就break跳出循环

在这里插入图片描述

2. 从尾部开始进行遍历、比较

在这里插入图片描述

3. 如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点

在这里插入图片描述

4. 如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点

在这里插入图片描述

5. 最特色的情况，中间还有很多未知的或者乱序的节点

在这里插入图片描述

在这个当中，vue的做法是尽可能的复用重复出现的节点，把旧的当中没有在新的里出现的节点移除，把出现在新的节点中而旧的节点中没有的新增

注：看到这里在返回读一下官方对v-for中key值的作用的解释，是不是就恍然大悟了！！！