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ù)組下標 0 刪除兩個元素，并在下標 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ù)組項時，例如：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ù)元素設置為 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 設置監(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 的方法來設置原有屬性
this.$set(this.watchObj, 'age', 124); this.$delete(this.watchObj, 'age') delete this.watchObj[‘name']//（Vue 無法監(jiān)聽 delete 關鍵字來刪除對象屬性）
使用 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ù)組和對象變化解決方案的詳細內(nèi)容，更多關于Vue watch數(shù)組對象變化的資料請關注腳本之家其它相關文章！
相關文章
vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標距頂位置向上滾動效果
這篇文章主要介紹了vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標距頂位置向上滾動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios,?axios)，本文給大家介紹Vue?axios和vue-axios關系，感興趣的朋友一起看看吧2022-08-08
vue-router動態(tài)設置頁面title的實例講解
今天小編就為大家分享一篇vue-router動態(tài)設置頁面title的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了cdn模式下vue的基本用法，本文通過圖文并茂的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10
從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化)
這篇文章主要介紹了從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
今天小編就為大家分享一篇vue添加axios,并且指定baseurl的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue-cli3啟動服務如何自動打開瀏覽器配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue?打包優(yōu)化之externals抽離公共的第三方庫詳解
這篇文章主要為大家介紹了Vue?打包優(yōu)化之externals抽離公共的第三方庫詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)側(cè)邊欄導航效果，右側(cè)顯示對應內(nèi)容，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
Vue使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務、清除復制粘貼樣式等)
這篇文章主要介紹了Vue項目中使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務、清除復制粘貼樣式等)的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05