四个字: 性能优化,

简述: 让vue在更新数据的时候可以更有针对性的

唯一性

diff时更快更准确找到变化的位置。

key的作用主要是为了高效的更新虚拟DOM,使用key来给每一个节点做一个唯一标识
diff算法可以正确的识别此节点,找到正确的位置对此节点进行操作

key唯一标识、防止复用dom、高效更新dom

当循环对象发生变化时，可以快速找到改变当位置，而做相应的改变。

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
用index作为key可能会引发的问题:

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
   最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
   如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

key的作用和数据发生更新时使用的diff算法息息相关，
diff算法在没有key时，例如发生插入时，原来的为1、2、3，插入4在2和3之间，变为1、2、4、3，计算机会这样执行，1->1,不变，2->2不变，3->4变了更新，空->3插入。对于人来看是十分笨的，这是因为它们彼此没有自己的名称来分辨彼此，因此v-for时，为每个遍历的元素加上自己的key，可以在diff算法发生过程中，直接精确判断，比如上诉的插入，可以遍历key，发现没有key，发生了插入，直接插入就可以，不需要低效的遍历替换，提高了页面渲染效率。

Key的定义

在 Vue 的 v-for 循环中，key 是一个特殊的属性，用于指定每个被迭代的元素的唯一标识。它的作用有以下几个方面：

作用

高效的更新策略
key 的主要作用是帮助 Vue 在进行列表渲染时，识别每个元素的身份。Vue 使用 key 来跟踪每个节点的身份，从而在进行列表更新时，尽可能地复用和更新现有的 DOM 节点，减少不必要的 DOM 操作，提高性能。
维持组件状态
在使用 v-for 渲染组件列表时，每个组件都是独立存在的，拥有自己的状态。使用 key 可以确保在列表更新时，每个组件都能保持自己的状态，而不会出现错位或混淆的情况。
提供可靠的唯一性
使用具有唯一性的 key 可以避免在列表中存在相同的项或出现重复的项。它帮助 Vue 在循环中区分不同的元素，确保每个元素都有一个独特的标识。

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

在上述示例中，我们通过给每个待办事项项指定一个唯一的 id 作为 key，这样在更新列表时，Vue 将根据 key 的变化来判断哪些元素是新增的、被修改的或被删除的，从而进行相应的 DOM 操作。