api-vue中key的作用

key的作用是什么

优化patch性能，更高效地更新虚拟dom

为什么要设置key

Vue判断两个节点是否相同，主要是判断两者的key和元素类型。渲染一组列表时，元素类型相同，如果不设置key，那么它的值就是undefined，Vue会认为他们值也相等，是相同节点，只能去做更新操作，这就造成大量的dom更新操作

列表中不要使用索引作为key，可以使用服务返回的id

如果使用的key是索引，那么删除，或者发生位置变化，对应dom的key就发生了变化

// 本地一组数据
a:1	b:2	c:3	d:4
//删除c后
a:1	b:2	d:3
// 其实d是没有发生变化的，但是现在Vue看到key不是4了（而是3），它认为发生了变化，会重新渲染d这个dom的

key的使用场景

• 列表渲染,使用行中的id作为key，不要用索引
• 动态组件中，给每个组件设置唯一key避免复用组件导致的状态混乱问题

[{name:"myComp1", id: 'xd01'}]
<template v-for="(item, index) in list">
	<component :is="item.name" :key="item.id">
</template>

• 使用vue过渡动画时，给每个过渡元素设置唯一key
• 性能优化，合理使用key，尽可能的复用dom