詳解Vue中watch的詳細(xì)用法
在vue中，使用watch來響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡單的用法：
'''
<input type="text" v-model="cityName"/>
new Vue({
el: '#root',
data: {
cityName: 'shanghai'
},
watch: {
cityName(newName, oldName) {
// ...
}
}
})
'''
直接寫一個(gè)監(jiān)聽處理函數(shù)，當(dāng)每次監(jiān)聽到 cityName 值發(fā)生改變時(shí)，執(zhí)行函數(shù)。也可以在所監(jiān)聽的數(shù)據(jù)后面直接加字符串形式的方法名：
'''
watch: {
cityName: 'nameChange'
}
}
'''
immediate和handler
這樣使用watch時(shí)有一個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會執(zhí)行。如果我們需要在最初綁定值的時(shí)候也執(zhí)行函數(shù)，則就需要用到immediate屬性。
比如當(dāng)父組件向子組件動態(tài)傳值時(shí)，子組件props首次獲取到父組件傳來的默認(rèn)值時(shí)，也需要執(zhí)行函數(shù)，此時(shí)就需要將immediate設(shè)為true。
'''
new Vue({
el: '#root',
data: {
cityName: ''
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
immediate: true
}
}
})
'''
監(jiān)聽的數(shù)據(jù)后面寫成對象形式，包含handler方法和immediate，之前我們寫的函數(shù)其實(shí)就是在寫這個(gè)handler方法；
immediate表示在watch中首次綁定的時(shí)候，是否執(zhí)行handler，值為true則表示在watch中聲明的時(shí)候，就立即執(zhí)行handler方法，值為false，則和一般使用watch一樣，在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行handler。
deep
當(dāng)需要監(jiān)聽一個(gè)對象的改變時(shí)，普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變，只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化，此時(shí)就需要deep屬性對對象進(jìn)行深度監(jiān)聽。
'''
<input type="text" v-model="cityName.name"/>
new Vue({
el: '#root',
data: {
cityName: {id: 1, name: 'shanghai'}
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
})
'''
設(shè)置deep: true 則可以監(jiān)聽到cityName.name的變化，此時(shí)會給cityName的所有屬性都加上這個(gè)監(jiān)聽器，當(dāng)對象屬性較多時(shí)，每個(gè)屬性值的變化都會執(zhí)行handler。如果只需要監(jiān)聽對象中的一個(gè)屬性值，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽對象屬性：
'''
watch: {
'cityName.name': {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
'''
總結(jié)
以上所述是小編給大家介紹的Vue中watch的詳細(xì)用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)
本文主要介紹了Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
Vue?Router?返回后記住滾動條位置的實(shí)現(xiàn)方法
使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求：首頁是列表頁,點(diǎn)擊列表項(xiàng)進(jìn)入詳情頁,在詳情頁點(diǎn)擊返回首頁后,希望看到的是,首頁不刷新,并且滾動條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動條位置的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-09-09
今天小編就為大家分享一篇基于element-ui的rules中正則表達(dá)式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue使用socket與服務(wù)端進(jìn)行通信的代碼詳解
這篇文章主要給大家介紹了vue如何使用socket與服務(wù)端進(jìn)行通信的相關(guān)資料,在Vue中我們可以將Websocket類封裝成一個(gè)Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09
vue 解決computed修改data數(shù)據(jù)的問題
今天小編就為大家分享一篇vue 解決computed修改data數(shù)據(jù)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理技巧
這篇文章主要介紹了Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理,本文給大家介紹兩種方法一種是借助canvas的封裝的文件壓縮上傳，二是使用compressorjs第三方插件實(shí)現(xiàn)，本文給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue如何使用外部特殊字體的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue 開發(fā)之路由配置方法,結(jié)合實(shí)例形式詳細(xì)分析了了vue.js路由原理、配置方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue-cli 配置資源引用的絕對路徑的問題，本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09