组件中key的作用

1、提高渲染效率 

vue和react都是采用diff算法来对比新旧节点，从而更新节点。key的作用是为了在执行diff算法时，更快地找到节点，提高渲染效率。

2、保持组件状态

在使用 v-for 指令渲染列表时，每个列表项都应该拥有唯一的 key，这样可以在列表项顺序改变时，Vue可以准确地判断哪些列表项是新添加的，哪些列表项是已存在但位置改变的，哪些列表项是被删除的，从而保持组件状态的正确性。

扩展：

1. 虚拟DOM中key的作用：

• key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2.对比规则：

• 旧虚拟DOM中找到了与新虚拟DOM相同的key：
  • 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
  • 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
• 旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到到页面。

3. 用index作为key可能会引发的问题：

• 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
  • 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
• 如果结构中还包含输入类的DOM：
  • 会产生错误DOM更新 ==> 界面有问题。