首先我们要明白vue中为什么要有这个key值呢！
这个key值能帮我们追踪dom树中的变化,让我们更新只发生变化的dom树,而不是只要有一个数据发生变化，我们就更新整个dom树.这个也算是Vdom的一大特点所在吧
1.像下面的这个数组数据遍历到数我们要遍历到页面上来展示,
var vm=new Vue({
el:"#app",
data:{
list:[
{id:1,name:'zhao'},
{id:2,name:'yun'},
{id:3,name:'chong'}
]
}
})
// 上来可能直接就这样使用数组 元素下标作为了
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="index">{{item.name}}</li>
</ul>
</div>
页面显示效果
我现在下面举一个小例子
下面的代码是什么意思呢,用过vue的童鞋可能对splice肯定不陌生吧
splice 使用来截取数组的
splice(start,count.newItem1,newItem2);
// 乍一看 是不是将 数组中大于2的元素去除掉呢
var arr=[1,2,3,4,5,6,7,8];
for(var key in arr){
if(arr[key]>2){
arr.splice(key,1);
}
}
console.log(arr);
但是结果真的是这样吗 好像结果跟我们想的不太一样是吧
这个是为什么呢
其实这里也有一个重要的思想就是:也是react框架 提倡的一种
不要操作原数组 数据 最好是拷贝一份 原数据 进行处理
这个也应该是 数组map函数的初衷吧
我们重新回到正题 为什么上面是那样的执行结果
都只到 splice是直接操作再原数组上面的
咱一点一点来剖析下执行过程 就知道为什么了
var arr=[1,2,3,4,5,6,7,8];
for(var key in arr){
if(arr[key]>2){
arr.splice(key,1);
}
}
第一次执行的时候
arr1=[1,2,3,4,5,6,7,8]; 当key=2的时候 arr[2]=3 就是满足条件 然后就是 splice(2,1)
执行完了之后 我们的数组就变成了
arr2=[1,2,4,5,6,7,8] 这里是关键了 我们的key值这下要加1 走下一个 就是 key=3
但是 arr[3]=5 因为之前的3被删除了 4就去了前面 顶替了3的位置
这下 splice(3,1); 把就 5给删除了
以此类推 6顶替 5的位置 7被删除
7被删除了 8顶替7的位置 然后 数组认为我遍历完了
这下就看到了上面的 执行结果了
也有童鞋说了 反正要达到你说的原来的需求 我直接使用 filter过滤就行
这下就成了
var arr=[1,2,3,4,5,6,7,8];
arr=arr.filter(item=>{
return item<=2;
})
console.log(arr);
使用es5的filter方法 确实完成了 我们上面的需求
但这个不要问题重点
在工作中 并不是你一个人的项目
有些时候 可能是同事误操作
导致了 数组的顺序发生了变化 这样 我们的vue 追踪就会发生问题了
本来原来位置上的被后面的元素顶替了
这样的问题 有些时候还很难排查
这下面 我例举出一些能影响数组顺序的 数组 api 都是慎用的 api
shift splice pop unshift
有了上面的教训 我们就换一下 key值就可以了
vue中的key有一个条件是 唯一 就可以 那每一个数据 我们先看看 他有没有和其他的数据唯一不一样 有不会发生变化的 满足我们的条件的就是 数据的 id值
item.id
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="index">{{item.id}}</li>
</ul>
</div>
所以 记住啊 童鞋们 不到万不得已 不要使用 数组的 下标作为 遍历的 key值
