Vue中在循环数据时 key值的设置大大简化了性能 ,然而坑依然无处不在请避免给key设置数据的索引值
话不多说 直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id='app'>
<li :key='index' v-for='(items,index) in arr'>
<input type='checkbox'> <span>{{items.name}}</span>
</li>
<button v-on:click='add'> 从后追加 </button>
<button v-on:click='unshif'> 从前添加 </button>
</ul>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [
{ id: 1, name: '张飞', age: 78 },
{ id: 2, name: '关羽', age: 79 },
{ id: 3, name: '赵云', age: 78 },
],
id: 3
},
methods: {
add() {
this.id++;
this.arr.push({ id: this.id, name: '刘备', age: 88 })
console.log(this.arr);
},
unshif: function () {
this.id++;
this.arr.unshift({ id: this.id, name: '刘备', age: 88 })
console.log(this.arr);
}
},
})
</script>
</body>
</html>
案例是给数组添加项并渲染到页面 key值使用index设置的。从尾部追加没有任何毛病ok
然后从头开始添加 状态就发生了改变*
新增加的刘备状态应该是未选中 结果却是选中状态 这是为何?
刘备状态出错原因
key值不能用index来设定 要给一个唯一的值
key值有个diff算法 渲染时如果有相同的key则不渲染dom节点不更新
因为在没有添加元素之前就存在索引为0 的这一项状态是checked ,由于
增加之后刘备这一项索引为0 索引没有更新checked状态
解决方案: 设置key的时候给一个唯一值id key是为了加快性能有相同id就
不在更新元素 在大量数据中添加值时 不用再一次次遍历 大大节省了性能