Vue不能监听数组变化 关于Vue不能监听(watch)数组变化的解决办法
奥特曼 人气:0想了解关于Vue不能监听(watch)数组变化的解决办法的相关内容吗，奥特曼在本文为您仔细讲解Vue不能监听数组变化的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：Vue不能监听数组变化,Vue监听数组，下面大家一起来学习吧。
一、vue监听数组
vue实际上可以监听数组变化，比如
data () {
return {
watchArr: [],
};
},
watchArr (newVal) {
console.log('监听：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr = [1, 2, 3];
}, 1000);
},
在比如使用splice(0,2,3)从数组下标0删除两个元素，并在下标0插入一个元素3
data () {
return {
watchArr: [1, 2, 3],
};
},
watchArr (newVal) {
console.log('监听：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.splice(0, 2, 3);
}, 1000);
},
push数组也能够监听到。
二、vue无法监听数组变化的情况
但是数组在下面两种情况下无法监听
- 利用索引直接设置数组项时，例如arr[indexofitem]=newValue
- 修改数组的长度时，例如arr.length=newLength
举例无法监听数组变化的情况
1、利用索引直接修改数组值
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr[0].name = 'xiaoyue';
}, 1000);
},
2、修改数组的长度
- 长度大于原数组就将后续元素设置为undefined
- 长度小于原数组就将多余元素截掉
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.length = 5;
}, 1000);
},
加载全部内容