vue watch監(jiān)聽變量值的實時變動示例詳解
vue watch監(jiān)聽變量值的實時變動
1 使用字符串形式的偵聽器函數(shù)
watch: {
'dataSetting.reverse_y'(newVal, oldVal) {
console.log(`reverse_y 值從 ${oldVal} 變成了 ${newVal}`);
}
}2 使用函數(shù)形式的偵聽器函數(shù)
watch: {
'dataSetting.reverse_y': function (newVal, oldVal) {
console.log('reverse_y 值發(fā)生變化了，新值為：', newVal);
}
}3
在使用 Vue 的 watch 監(jiān)聽屬性時，可以使用兩種寫法：
1.使用字符串形式的偵聽器函數(shù)：'dataSetting.reverse_y' 這種寫法會自動綁定到 Vue 實例上，并被解析為一個函數(shù)，函數(shù)內(nèi)部的 this 指向 Vue 實例本身。
2.使用函數(shù)形式的偵聽器函數(shù)：function (newVal, oldVal) {} 這種寫法需要手動綁定，使用 bind 方法將函數(shù)綁定到 Vue 實例上，或者使用箭頭函數(shù)，讓函數(shù)內(nèi)部的 this 自動綁定到 Vue 實例上。使用函數(shù)形式時，要使用 this.dataSetting.reverse_y 來訪問 Vue 實例中的數(shù)據(jù)屬性。
vue中watch監(jiān)聽數(shù)據(jù)變化的使用
1. 作用（父傳子傳孫中）
監(jiān)聽方法，一旦發(fā)現(xiàn)list傳過來的toSun的值有變化，會重新執(zhí)行新的方法
2. 問題
不使用會造成第一次請求的數(shù)據(jù)是對的，換一個數(shù)據(jù)請求會導(dǎo)致還是第一次的數(shù)據(jù)，沒有更新數(shù)據(jù)
3. 寫法
watch: {
toSun: {
handler(newVal, oldVal) {
// console.log(newVal, oldVal);
this.getUser();
this.getBank();
this.getAddressList();
},
deep: true,
immediate: true,
},
},4. 參考文獻
到此這篇關(guān)于vue 監(jiān)聽變量值的實時變動 watch的文章就介紹到這了,更多相關(guān)vue watch監(jiān)聽變量值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
contenteditable 屬性為網(wǎng)頁開發(fā)者提供了一種靈活的方式來創(chuàng)建可編輯的內(nèi)容區(qū)域,使用戶可以直接在網(wǎng)頁上進行內(nèi)容編輯,而無需依賴傳統(tǒng)的輸入框,本文將利用contenteditable打造定制化輸入,感興趣的可以了解下2023-12-12
本文主要介紹了vue全局掛載實現(xiàn)APP全局彈窗的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Mint UI組件庫CheckList使用及踩坑總結(jié)
這篇文章主要介紹了Mint UI組件庫CheckList使用及踩坑總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家學(xué)習(xí)介紹了如何基于Vue實現(xiàn)簡單的權(quán)限控制，文中的示例代碼講解詳細，具有一定的參考價值，需要的小伙伴可以了解一下2023-07-07
這篇文章主要為大家詳細介紹了vue基于better-scroll仿京東分類列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
vue?動態(tài)路由component?傳遞變量報錯問題解決
這篇文章主要為大家介紹了vue?動態(tài)路由component?傳遞變量報錯問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了Vue之父子組件傳值，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue搜索和vue模糊搜索，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue3中reactive和ref函數(shù)及對比,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2024-01-01
vue中對監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08