key 是 虚拟DOM 对象的标识,
它帮助 Vue 的 diff 算法进行 新虚拟DOM 与 旧虚拟DOM 的对比
对比规则如下
旧虚拟DOM 未找到与 新虚拟DOM 相同的 key
创建新的 真实DOM
旧虚拟DOM 找到了与 新虚拟DOM 相同的 key
若对比发现二者中内容一致,则直接使用 旧真实DOM
若对比发现二者中内容不一致,则 新真实DOM ,替换掉 旧真实DOM
如在 v-for 中不使用 key,Vue 会默认把遍历时的索引值(index)作为 key 使用
会导致对数据进行破坏顺序操作的时候:会产生没有必要的 真实DOM 更新,虽界面效果没问题,但 效率低
如果结构中还包含输入类的DOM:会产生错误的 DOM 更新,导致界面出现问题
不使用 key 实例
{{p.name}} - {{p.age}}
这个案例在 persons 数组使用 unshift() 方法,在输入框输入后,单击添加一个老刘
为数组的前端添加一个元素 {id: '004', name: '老刘', age: 50}
,对数据进行了顺序破坏
导致页面出现问题,且效率低
最好使用每条数据的唯一的标识作为 key,如 id、手机号码、身份证号码、学号
如果不存在对数据破坏顺序的操作,仅用于渲染列表用于展示,使用 index 作为 key 也未必不是一个好的方法