Vue不能watch數(shù)組和對象變化解決方案
Vue 能監(jiān)聽數(shù)組的情況
Vue 監(jiān)聽數(shù)組和對象的變化（vue2.x）
vue 實際上可以監(jiān)聽數(shù)組變化，比如：
直接 = 賦值
data () {
return {
watchArr: [],
};
},
watch: {
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
}
},
created () {
setTimeout(() => {
this.watchArr = [1, 2, 3];
}, 1000);
},再如使用 splice(0, 2, 3) 從數(shù)組下標(biāo) 0 刪除兩個元素，并在下標(biāo) 0 插入一個元素 3：
data () {
return {
watchArr: [1, 2, 3],
};
},
watch: {
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
}
},
created () {
setTimeout(() => {
this.watchArr.splice(0, 2, 3);
}, 1000);
},push、unshift、pop 數(shù)組也能夠監(jiān)聽到
Vue 無法監(jiān)聽數(shù)組變化
但是，數(shù)組在下面兩種情況無法監(jiān)聽：
利用索引直接設(shè)置一個數(shù)組項時，例如：arr[indexOfItem] = newValue;
修改數(shù)組的長度時，例如：arr.length = newLength;
舉例無法監(jiān)聽數(shù)組變化的情況
利用索引直接修改數(shù)組值
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watch: {
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
}
},
created () {
setTimeout(() => {
this.watchArr[0].name = 'xiaoyue';
}, 1000);
},修改數(shù)組的長度
長度大于原數(shù)組就將后續(xù)元素設(shè)置為 undefined
長度小于原數(shù)組就將多余元素截掉
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watch: {
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
}
},
created () {
setTimeout(() => {
this.watchArr.length = 5;
}, 1000);
},
上面的 watchArr 變成
Vue 無法監(jiān)聽數(shù)組變化的解決方案
this.$set(arr, index, newVal);
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watch: {
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
}
},
created () {
setTimeout(() => {
this.$set(this.watchArr, 0, {name: 'xiaoyue'});
}, 1000);
},使用數(shù)組 splice 方法可以監(jiān)聽，例子上面有
使用臨時變量直接賦值的方式，原理與直接賦值數(shù)組一樣
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watch: {
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
}
},
created () {
setTimeout(() => {
let temp = [...this.watchArr];
temp[0] = {
name: 'xiaoyue',
};
this.watchArr = temp;
}, 1000);
},
Vue 監(jiān)聽對象
Vue 可以監(jiān)聽直接賦值的對象
this.watchObj = {name: 'popo'};
但是 Vue 不能 直接 監(jiān)聽對象屬性的添加、修改、刪除
Vue 設(shè)置監(jiān)聽對象
使用this.$set(object, key, value)、this.$delete(object, key)
使用深度監(jiān)聽 deep: true，只能監(jiān)聽原有屬性的變化，不能監(jiān)聽新增、刪除的屬性
mounted () {
// 這里使用深度監(jiān)聽 blog 對象的屬性變化，會觸發(fā) getCatalog 方法
this.$watch('blog', this.getCatalog, {
deep: true
// immediate: true // 是否第一次觸發(fā)
});
},
watch: {
obj: {
// 這里深度監(jiān)聽變化，直接觸發(fā)下面方法
handler(curVal, oldVal) {
// TODO
},
deep: true,
immediate: true // 是否第一次觸發(fā)
}
}使用this.$set(obj, key, val)來新增屬性，this.$delete(object, key)來刪除屬性
無法使用 this.$set 監(jiān)聽修改原有屬性；可以使用深度監(jiān)聽 deep: true，可以直接以 obj.key 的方法來設(shè)置原有屬性
this.$set(this.watchObj, 'age', 124); this.$delete(this.watchObj, 'age') delete this.watchObj[‘name']//（Vue 無法監(jiān)聽 delete 關(guān)鍵字來刪除對象屬性）
使用 Object.assign 方法，直接賦值的原理監(jiān)聽（最推薦的方法）
this.watchObj = Object.assign({}, this.watchObj, {
name: 'xiaoyue',
age: 15,
});直接 watch obj.key 監(jiān)聽某個值的變化
watch: {
'obj.name'(curVal, oldVal) {
// TODO
}
}以上就是Vue不能watch數(shù)組和對象變化解決方案的詳細(xì)內(nèi)容，更多關(guān)于Vue watch數(shù)組對象變化的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
elementui實現(xiàn)表格(el-table)默認(rèn)選中功能
這篇文章主要介紹了elementui實現(xiàn)表格(el-table)默認(rèn)選中功能,本文給大家分享實現(xiàn)思路結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-07-07
在vue項目中開發(fā)環(huán)境的樣式?jīng)]問題,但是打包上線后,樣式不生效,下面這篇文章主要給大家介紹了關(guān)于Vue打包上線之后部分CSS不生效問題的解決辦法,需要的朋友可以參考下2022-12-12
詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)，使用v-model指令,使得視圖和數(shù)據(jù)實現(xiàn)雙向綁定，有興趣的可以了解一下2017-06-06
vue在線預(yù)覽word、excel、pdf、txt、圖片的方法實例
最近工作中遇到了一個需要在線預(yù)覽文件的需求,所以這篇文章主要給大家介紹了vue在線預(yù)覽word、excel、pdf、txt、圖片的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue Element前端應(yīng)用開發(fā)之前端API接口的封裝
對整個系統(tǒng)來說，一般會有很多業(yè)務(wù)對象，而每個業(yè)務(wù)對象的API接口又有很多。我們這個VUE+Element 前端應(yīng)用就是針對ABP框架的業(yè)務(wù)對象，因此前端的業(yè)務(wù)對象接口也是比較統(tǒng)一的，那么可以考慮在前端中對后端API接口調(diào)用進(jìn)行封裝，引入ES6的方式進(jìn)行前端API的抽象簡化。2021-05-05
這篇文章主要介紹了Vue中的驗證登錄狀態(tài)的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue el-select綁定對象時,回顯內(nèi)容不正確,始終是最后一項的解決
這篇文章主要介紹了vue el-select綁定對象時,回顯內(nèi)容不正確,始終是最后一項的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue2?Element?description組件列合并詳解
在使用Vue的時候經(jīng)常會涉及到表格的列合并,下面這篇文章主要給大家介紹了給大家Vue2?Element?description組件列合并的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
vue父組件中獲取子組件中的數(shù)據(jù)(實例講解)
下面小編就為大家?guī)硪黄獀ue父組件中獲取子組件中的數(shù)據(jù)(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue props中Object和Array設(shè)置默認(rèn)值操作
這篇文章主要介紹了Vue props中Object和Array設(shè)置默認(rèn)值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07