解决vue⽆法侦听数组及对象属性的变化问题
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 = iginArr
this.$set(this.dataArr, 0, {data: '修改第⼀个元素'})
console.log(this.dataArr)
console.iginArr)    //同样的源数组也会被修改在某些情况下会导致你不希望的结果
上⾯提到的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', Catalog, {
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⽆法侦听数组及对象属性的变化问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。