快捷導(dǎo)航

vue watch監(jiān)聽變量值的實(shí)時(shí)變動(dòng)示例詳解

更新時(shí)間：2023年08月11日 15:02:35 作者：tenc1239

這篇文章主要介紹了vue 監(jiān)聽變量值的實(shí)時(shí)變動(dòng) watch,使用字符串形式的偵聽器函數(shù),還有一種是使用函數(shù)形式的偵聽器函數(shù),本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

vue watch監(jiān)聽變量值的實(shí)時(shí)變動(dòng)

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)聽屬性時(shí)，可以使用兩種寫法：

1.使用字符串形式的偵聽器函數(shù)：'dataSetting.reverse_y' 這種寫法會(huì)自動(dòng)綁定到 Vue 實(shí)例上，并被解析為一個(gè)函數(shù)，函數(shù)內(nèi)部的 this 指向 Vue 實(shí)例本身。

2.使用函數(shù)形式的偵聽器函數(shù)：function (newVal, oldVal) {} 這種寫法需要手動(dòng)綁定，使用 bind 方法將函數(shù)綁定到 Vue 實(shí)例上，或者使用箭頭函數(shù)，讓函數(shù)內(nèi)部的 this 自動(dòng)綁定到 Vue 實(shí)例上。使用函數(shù)形式時(shí)，要使用 this.dataSetting.reverse_y 來訪問 Vue 實(shí)例中的數(shù)據(jù)屬性。

vue中watch監(jiān)聽數(shù)據(jù)變化的使用

1. 作用（父傳子傳孫中）

監(jiān)聽方法，一旦發(fā)現(xiàn)list傳過來的toSun的值有變化，會(huì)重新執(zhí)行新的方法

2. 問題

不使用會(huì)造成第一次請(qǐng)求的數(shù)據(jù)是對(duì)的，換一個(gè)數(shù)據(jù)請(qǐng)求會(huì)導(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. 參考文獻(xiàn)

Vue中watch的詳解

到此這篇關(guān)于vue 監(jiān)聽變量值的實(shí)時(shí)變動(dòng) watch的文章就介紹到這了,更多相關(guān)vue watch監(jiān)聽變量值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3使用contenteditable打造定制化輸入
contenteditable 屬性為網(wǎng)頁開發(fā)者提供了一種靈活的方式來創(chuàng)建可編輯的內(nèi)容區(qū)域,使用戶可以直接在網(wǎng)頁上進(jìn)行內(nèi)容編輯,而無需依賴傳統(tǒng)的輸入框,本文將利用contenteditable打造定制化輸入,感興趣的可以了解下
2023-12-12
vue全局掛載實(shí)現(xiàn)APP全局彈窗的示例代碼
本文主要介紹了vue全局掛載實(shí)現(xiàn)APP全局彈窗的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
Mint UI組件庫CheckList使用及踩坑總結(jié)
這篇文章主要介紹了Mint UI組件庫CheckList使用及踩坑總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
基于Vue實(shí)現(xiàn)簡單的權(quán)限控制
這篇文章主要為大家學(xué)習(xí)介紹了如何基于Vue實(shí)現(xiàn)簡單的權(quán)限控制，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的小伙伴可以了解一下
2023-07-07
vue基于better-scroll仿京東分類列表
這篇文章主要為大家詳細(xì)介紹了vue基于better-scroll仿京東分類列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決
這篇文章主要為大家介紹了vue?動(dòng)態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
詳解Vue之父子組件傳值
這篇文章主要介紹了Vue之父子組件傳值，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue搜索和vue模糊搜索代碼實(shí)例
這篇文章主要介紹了vue搜索和vue模糊搜索，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue3中reactive和ref函數(shù)及對(duì)比分析
這篇文章主要介紹了vue3中reactive和ref函數(shù)及對(duì)比,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2024-01-01
vue中對(duì)監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對(duì)監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08