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