溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
