vue中key的作用

vue 中 key 的作用

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

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

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

4. 开发中如何选择 key?: 1.最好使用每条数据的唯一标识作为 key, 比如 id、手机号、身份证号、学号等唯一值。 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。