詳解Vue中watch對象內(nèi)屬性的方法
更新時間：2019年02月01日 09:15:13 作者：OceanZH
這篇文章主要介紹了詳解Vue中watch對象內(nèi)屬性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
vue提供了watch方法，用于監(jiān)聽實例內(nèi)data數(shù)據(jù)的變化。通常寫法是：
new Vue({
data: {
count: 10，
blog:{
title:'my-blog',
categories:[]
}
},
watch: {
count: function (newval, oldVal) {
console.log(`new: %s, old: %s`, newVal, oldVal);
}
}
})
上述情況里data中的count屬性可以直接監(jiān)聽，但是如果需要監(jiān)聽的數(shù)據(jù)是對象內(nèi)的某一屬性值的變化，直接watch對象blog是檢測不到變化的，這是因為blog這個對象的指向并沒有發(fā)生改變。有幾個解決方法
1.深度監(jiān)測
new Vue({
data: {
count: 10，
blog:{
title:'my-blog',
categories:[]
}
},
watch: {
blog:{
handler(newVal,oldVal){
console.log(`new: ${newVal}, old: ${oldVal}`);
},
deep:true
}
}
})
里面的deep設為了true，這樣的話，如果修改了這個blog中的任何一個屬性，都會執(zhí)行handler這個方法。不過這樣會造成更多的性能開銷，尤其是對象里面屬性過多，結(jié)構(gòu)嵌套過深的時候。而且有時候我們就只想關(guān)心這個對象中的某個特定屬性，這個時候可以這樣
2.用字符串來表示對象的屬性調(diào)用
new Vue({
data: {
count: 10，
blog:{
title:'my-blog',
categories:[]
}
},
watch: {
'blog.categories'(newVal, oldVal) {
console.log(`new:${newVal}, old:${oldVal}`);
},
}
})
3.使用computed計算屬性
new Vue({
data: {
count: 10，
blog:{
title:'my-blog',
categories:[]
}
},
computed: {
categories() {
return this.blog.categories;
}
},
watch: {
categories(newVal, oldVal) {
console.log(`new:${newVal}, old:${oldVal}`);
},
},
})
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue服務端渲染操作,結(jié)合簡單實例形式分析了vue.js服務端渲染操作的原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-08-08
vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)
這篇文章主要介紹了vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)通訊錄功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
最近在學習Three.js相關(guān)的技術(shù),恰逢Vue 3.0正式版也已推出,下面這篇文章主要給大家介紹了關(guān)于vue3項目中使用three.js的操作步驟,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
vue3實現(xiàn)封裝時間計算-日期倒計時組件-還有XX天&第XX天
這篇文章主要介紹了vue3實現(xiàn)封裝時間計算-日期倒計時組件-還有XX天&第XX天,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在本篇文章里小編給各位整理的是一篇關(guān)于Vue引入Stylus知識點總結(jié)內(nèi)容，有需要的朋友們可以學習參考下。2020-01-01
眾所周知vue是操作dom元素的,那么如果有元素要動態(tài)綁定樣式,這種需求,還是要通過改變數(shù)據(jù)來改變視圖的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)樣式綁定的相關(guān)資料,需要的朋友可以參考下2023-04-04
在Vue中使用this.$store或者是$route一直報錯的解決
今天小編就為大家分享一篇在Vue中使用this.$store或者是$route一直報錯的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue中的過濾器及其時間格式化,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
vue使用富文本編輯器vue-quill-editor的操作指南和注意事項
vue中很多項目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue使用富文本編輯器vue-quill-editor的操作指南和注意事項,需要的朋友可以參考下2023-05-05