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