在我们项目开发过程中，实例中的数据类型可以是对象、数组等。在对象中，某个属性值发生更改时，我们可以通过对象的深度监听，以达到重新渲染页面的需求。或者查阅这篇文章
例如：
<script>
export default {
data(){
return {
objVal: {
name: 'obj',
type: 'obj'
}
}
},
watch:{
objVal:{
handler(val,oldval){
},
deep: true,
}
},
methods:{
changeObj(){
this.objVal.name = 'newobj';
}
}
}
</script>
但是，在使用同一种方式进行数组值更改监听时，这种做法是无效的。
<script>
export default {
data() {
return {
arrList: [1,2,3,4,5]
};
},
watch: {
arrList: {
handler(val, oldval) {
},
deep: true
}
},
methods: {
changeArr() {
// 无效
this.arrList[0] = 10;
}
}
};
</script>
上述用以监听数组值变化的方法是无效的，vue是不会响应数据变化而重新去渲染页面。在vue中仅需要通过修改赋值语句的方式，即可让vue响应数组数据的变化。具体操作如下：
使用方法：
// Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
具体使用案例：
<script>
export default {
data() {
return {
arrList: [1,2,3,4,5]
};
},
methods: {
changeArr() {
// this.arrList[0] = 10;
// 修改为：
this.arrList.splice(0, 1, 10);
}
}
};
</script>
或：
<script>
export default {
data() {
return {
arrList: [1,2,3,4,5]
};
},
methods: {
changeArr() {
// this.arrList[0] = 10;
// 修改为：
this.$set(this.arrList, 0, 10);
}
}
};
</script>
以上两种方式，均可达到监听数组值变化的效果。
补充知识：vue数组操作不触发前端重新渲染
暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决。
此外，能够监听的数组变异方法
https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95
还有就是set
标签：
vue,数组值监听,重新渲染
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“在vue中对数组值变化的监听与重新响应渲染操作”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。