Vue key的作用

先了解v-for用法

v-for=“(item,index) in persons” :key=“item.id”
index代表索引 不用的时候可以不加 省掉 ()

1.key是必填项 不写会报错
2.他是唯一值 根据diff算法 避免重复渲染
拿根据新的数据生成的【新的虚拟DOM】与之前的【真实的DOM】去做比较，如果相同，直接延用即可（“拿来主义”）；如果不同，则生成新的DOM对象，节省了资源开支

<template>
 <div style="margin: 100px;">
    <h2 >人员列表</h2>
    <div v-for="(item,index) in persons" :key="item.id">{{item.name}}-----{{index}}</div>
 </div>
</template>
<script>
export default {
 name: '',
 data () { 
 return {    
    persons:[ 
            {'id':'001', 'name':'小谢','age':'18'},
            {'id':'002', 'name':'小熊','age':'19'},
            {'id':'003', 'name':'小王','age':'20'}
        ]
 }
},
}
</script>
<style lang='less' scoped>
 
</style>

效果如下：

注意点：
1.推荐使用数据的唯一标识作为key，比如id，身份证号，手机号等等，通常这些数据由后端提供
2.后续操作不破坏原来数据顺序的话，使用index作为key也可以