v-for中的key是什么作用？

学习了coderwhy的vue3+ts视频课的笔记

• 在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。
• 这个key属性有什么作用呢？我们先来看一下官方的解释：
  • key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比（使用到diff算法）时辨识VNodes；
  • 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；
  • 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素。
• 官方的解释对于初学者来说并不好理解，比如下面的问题：
  • 什么是新旧nodes，什么是VNode？
  • 没有key的时候，如何尝试修改和复用的？
  • 有key的时候，如何基于key重新排列的？

一、下面我们先理解一些概念：

1. 认识VNode

• 我们先来解释一下VNode的概念：
  • 因为目前我们还没有比较完整的学习组件的概念，所以目前我们先理解HTML元素创建出来的VNode；
  • VNode的全称是Virtual Node，也就是虚拟节点；
  • 事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode；
  • VNode的本质是一个JavaScript的对象。

2. 虚拟DOM

• 如果我们不只是一个简单的div，而是有一大堆的元素，那么它们应该会形成一个VNode Tree：

• VNode和虚拟DOM的关系：虚拟DOM就是由多个VNode组成的。

• 注意：

  • 上图的虚拟DOM和真实DOM的关系，正常情况下，是不一一对应的（比如组件生成的Vnode的）；
  • 使用虚拟DOM最大的作用就是可以实现跨平台。

二、通过结合案例，了解v-for中的key作用：

• 我们先来看一个案例：这个案例是当我点击按钮时会在中间插入一个f；

1. Vue源码对于key的判断

2-1. 没有key的操作（源码）

• 没有key的过程如下：
  • 我们会发现上面的diff算法效率并不高：
    • c 和 d 来说它们事实上并不需要有任何的改动；
    • 但是因为我们的 c 被 f 所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增。

• 注意：源码中，在新旧VNode列表的两个长度中，选取最小的进行for循环边界，就是为了防止在一个取的到值，另一个取不到（也就是没有）的问题。再通过if判断，旧VNode列表的长度 > 新VNode列表的长度，则删除，反之则添加。

2-2. 有key执行操作（源码）

有key的diff算法如下（一）：

• 第一步的操作是从头开始进行遍历、比较：
  • a和b是一致的会继续进行比较；
  • c和f因为key不一致，所以就会break跳出循环。

• 第二步的操作是从尾部开始进行遍历、比较：

有key的diff算法如下（二）：

• 第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点：

• 第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点：

有key的diff算法如下（三）：

• 第五步是最特色的情况，中间还有很多未知的或者乱序的节点：

• 所以我们可以发现，Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：
  • 在没有key的时候我们的效率是非常低效的；
  • 在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效。

看完上面中 一 和 二 的内容，再回头看官方的解释，就清晰很多了。