vue中的key的作用原理

https://blog.csdn.net/cun_king/article/details/120714227?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-120714227-blog-124462018.pc_relevant_recovery_v2&spm=1001.2101.3001.4242.2&utm_relevant_index=4

 

https://blog.csdn.net/m0_56201092/article/details/124514148

 vue会使用就地复用、就地修改的策略来提高更新虚拟DOM的效率。在更新虚拟DOM的时候，key 作为新节点和旧节点做对比的标识，以此来提高更新虚拟DOM的效率。

不使用 key的情况下：
在列表渲染，比如 v-for 指令渲染时，因为此时没有给各个节点添加唯一的 key，当各个节点上的一些特性就得不到唯一的辨识，更新后的虚拟DOM的相应节点的特性容易错乱或丢失。

使用 key的情况下：
每个节点添加了唯一的 key，vue在更新虚拟DOM时，并不是动态创建或销毁 key存在的元素节点，而是以 key作为辨识，把对应的元素进行排序，并且会移除 key不存在的元素。

注意点：

1.在同级的元素节点中的 key应该是唯一的，否则会发生渲染错误。比如index、id、手机号、身份证号、学号等唯一值。（默认是index）

2.仅用于渲染列表用于展示, 使用index作为key是没有问题的。

3.逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新（逐条更新，就地修改） ==> 界面效果没问题，但效率低。

如果结构中还包含输入类的DOM；会产生错误DOM更新（就地复用） ==> 界面有问题。