关于vue不能watch数组变化和对象变化的解决方案.docx

关于vue不能watch数组变化和对象变化的解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
博客地址：关于 vue 不能 watch 数组变化 和 对象变化的解决方案   
 
   
关于vue不能watch数组变化和对象变化的解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
博客地址：关于 vue 不能 watch 数组变化 和 对象变化的解决方案
vue 监听数组和对象的变化
vue 监听数组
vue 实际上可以监听数组变化，比如：
data () {
return {
watchArr: [],
};
},
watchArr (newVal) {
('监听：' + newVal);
},
created () {
setTimeout(() => {
= [1, 2, 3];
}, 1000);
},
再如使用 splice(0, 2, 3) 从数组下标 0 删除两个元素，并在下标 0 插入一个元素 3：
data () {
return {
watchArr: [1, 2, 3],
};
},
watchArr (newVal) {
('监听：' + newVal);
},
created () {
setTimeout(() => {
(0, 2, 3);
}, 1000);
},
push 数组也能够监听到
vue 无法监听数组变化的情况
但是，数组在下面两种情况无法监听：
利用索引直接设置一个数组项时，例如：arrindexOfItem = newValue;
修改数组的长度时，例如： = newLength;
举例无法监听数组变化的情况
利用索引直接修改数组值
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
('监听：' + newVal);
},
created () {
setTimeout(() => {
[0].name = 'xiaoyue';
}, 1000);
},
修改数组的长度 长度大于原数组就将后续元素设置为 undefined 长度小于原数组就将多余元素截掉undefined
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
('监听：' + newVal);
},
created () {
setTimeout(() => {