这是我在项目中出现过的bug，复制下面代码，自己运行一下就知道，使用index向最前面添加数据渲染的列表会有bug，先选中一条数据，再添加就会出现bug，使用id就不会，要问为什么会这样，这就涉及到了虚拟DOM的diff算法
可以看看这大神的：vue 虚拟dom和diff算法详解_ら陈佚晨的博客-CSDN博客_vue虚拟dom和diff算法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue前进页面</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul class="abb">
<li v-for="(item,index) in productList" :key="index"><input type="checkbox">{{item.productName}}</li>
</ul>
<input type="text" v-model="mode" />
<button @click="tianjai">添加</button>
<button>删除</button>
</div>
<script>
let vm=new Vue({
el:"#app",
data:{
productList: [
{ productName: "篮球",id:1 },
{ productName: "乒乓球", id:2},
{ productName: "羽毛球", id:3 },
{ productName: "排球", id:4},
{ productName: "足球", id:5},
],
mode:""
},
methods:{
tianjai(){
this.productList.unshift({productName:this.mode})
}
}
})
console.log(vm)
</script>
</body>
</html>
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
