这篇文章主要为大家展示了vue无法侦听数组及对象属性怎么办，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。
一、数组
1、可以监听到的情况
如push、splice、=赋值（array=[1,2,3]）
2、无法监听到的情况
使用下标修改某个元素（这种比较常见）
array[index] = 1
object.a = 3
直接修改数组length
array.length = 5
3、解决方案
this.$set(array, index, data) - 这是个深度的修改，某些情况下可能导致你不希望的结果，因此最好还是慎用
this.dataArr = this.originArr
this.$set(this.dataArr, 0, {data: '修改第一个元素'})
console.log(this.dataArr)
console.log(this.originArr) //同样的 源数组也会被修改 在某些情况下会导致你不希望的结果上面提到的splice方法进行增删改
利用临时变量进行中转
let tempArr = [...this.targetArr]
tempArr[0] = {data: 'test'}
this.targetArr = tempArr二、对象
对象和数组都是js里的引用类型，在实际存储中，数据是存储在堆中的，利用存储在栈里的对象名或者数组名的指针进行索引，因此也存在在浅拷贝和深拷贝以及等号赋值时，到底是仅仅新建了一个指针指向了同一份数据，还是两个指针分别指向了两份完全一样的数据的问题
1、可以监听到的
对象的直接=赋值
this.obj = {name: 'test'}
2、无法监听到的
对象属性的增删改
obj: {
prop1: 'data1',
prop2: 'data2'
}
...
// 增
this.obj.prop3 = 'data3'
// 删
delete this.obj.prop1
// 改
this.obj.prop1 = 'data4'3、解决办法
this.$set(obj, key ,value) - 可实现增、改
watch时添加deep：true深度监听，只能监听到属性值的变化，新增、删除属性无法监听
this.$watch('blog', this.getCatalog, {
deep: true
// immediate: true // 是否第一次触发
});
watch时直接监听某个key
watch: {
'obj.name'(curVal, oldVal) {
// TODO
}
}
object.assign()+直接=赋值
this.watchObj = Object.assign({}, this.watchObj, {
name: 'xiaoyue',
age: 15,
});补充知识：vue 监听不到数组或对象值的变化怎么办
一、vue监听数组的变化
vue能购监听到数组变化的场景
通过赋值的形式改变正在被监听的数组；
通过splice(index, num, val) 的形式改变正在被监听的数组;
通过数组的push的形式改变正在被监听的数组。
vue无法监听数组变化的场景
通过数组索引改变数组元素的值；
改变数组的长度；
vue无法监听数组变化的场景
this.$set(arr, index, newVal);
通过splice（index，num，val）；
使用临时变量作为中转，重新赋值数组；
二、vue监听对象的变化
vue能够监听到对象变化的场景
通过直接赋值的场景。
eg：watchObj = {name:“zyk”}
vue无法监听到对象变化的场景
对象的增加、删除、修改无法被vue监听到
vue解决无法监听对象变化的方法
使用 this.$set(object, key, value)（vue 无法监听 this.set 修改原有属性）
使用Object.assign()，直接赋值的原理；（推荐使用）
以上就是关于vue无法侦听数组及对象属性怎么办的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
