-23 key 的内部原理

key 的内部原理

 1、虚拟DOM 中 key 的作用：

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

2、对比规则：

(1) [旧虚拟DOM]中找到与 [新虚拟DOM] 相同的key  

           若虚拟DOM中内容没有改变，则直接使用之前的真实DOM

           若虚拟DOM中内容发生改变，则生成新的真实DOM

(2) [旧虚拟DOM]中没有找到与 [新虚拟DOM] 相同的key，创建真实DOM，渲染页面

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

(1)若对数据进行 逆序添加 等破坏顺序操作 ==> 会产生没有必要的真实DOM更新，效率降低

(2)如果结构中包含输入类的DOM ==> 会产生错误的DOM更新，界面显示出现问题

4、开发中如何选择 key ?

(1) 最好使用每条数据的唯一标识作为 key

(2) 如果不存在破坏顺序的操作，就可以使用 index 作为 key

---