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