十三、列表渲染-key的原理

（一）虚拟 DOM 中 key 的作用

• 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

• 最好使用每条数据的唯一标识作为 key
  • 比如 id、手机号、身份证号、学号等唯一值
• 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作
  • 仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的