谈谈key的唯一性特殊处理

悠悠 2023-02-18 09:49 8阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]

## 通常： ##

key 管理可复用的元素，key给每个vnode的唯一id，可以依靠key，更准确、更快拿到oldVnode中对应的vnode节点 。

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

这个默认的模式是高效的，**但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。**

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key

## 特殊： ##

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。**重复的 key 会造成渲染错误，出现莫名其妙的bug。**

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 key 来提供一个排序提示：

上面例子我们可以为数组加唯一的id，**思考：** 如果data中没有id呢？就要借助第三方插件 **shortid**提供独一无二的id。[参考文档][Link 1]

它也可以**用于强制替换元素/组件而不是重复使用它**。当你遇到如下场景时它可能会很有用：

*  完整地触发组件的生命周期钩子
 *  触发过渡

<ul>
    	<li v-for="(item,index) in persons" :key="personsKeys[index]">
           ID:{ { personsKeys[index]}}----{ { index}}.姓名：{ { item.name}},年龄：{ { item.age}},性别：{ { item.sex}}
        </li>
    </ul>
    
    data(){ 
    	return{ 
    		persons:[
    			{ name:'张三',age:18,sex:"男"},
    			{ name:'李四',age:28,sex:"女"},
    			{ name:'王五',age:38,sex:"男"}
    		],
    		personsKeys:[]
    	}
    },
    mounted() { 
    	//产生唯一的key放到personsKeys中
    	this.personsKeys = this.persons.map(v=>shortId.generate())
    }

![在这里插入图片描述][20200617122759399.png]  
会产生对应的ID指向。  
**如果仅仅只是展示的话，index不加都可以的，**  
另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in persons"></div>
    <div v-for="(val, key) in object"></div>  //遍历对象建议用key，不过index也可以
    <div v-for="(val, name, index) in object"></div>

## 总结 ##

遍历的时候，进行改变或者排序的时候，定义唯一的id是最靠谱的，尤其性能优化要考虑到严谨性！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201014101531123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ==,size_16,color_FFFFFF,t_70#pic_center
[Link 1]: https://github.com/dylang/shortid
[20200617122759399.png]: https://img-blog.csdnimg.cn/20200617122759399.png