快捷導(dǎo)航

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

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

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

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

1 使用字符串形式的偵聽(tīng)器函數(shù)

watch: {
    'dataSetting.reverse_y'(newVal, oldVal) {
      console.log(`reverse_y 值從 ${oldVal} 變成了 ${newVal}`);
    }
  }

2 使用函數(shù)形式的偵聽(tīng)器函數(shù)

watch: {
  'dataSetting.reverse_y': function (newVal, oldVal) {
    console.log('reverse_y 值發(fā)生變化了，新值為：', newVal);
  }
}

3

在使用 Vue 的 watch 監(jiān)聽(tīng)屬性時(shí)，可以使用兩種寫(xiě)法：

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

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

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

1. 作用（父?jìng)髯觽鲗O中）

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

2. 問(wèn)題

不使用會(huì)造成第一次請(qǐng)求的數(shù)據(jù)是對(duì)的，換一個(gè)數(shù)據(jù)請(qǐng)求會(huì)導(dǎo)致還是第一次的數(shù)據(jù)，沒(méi)有更新數(shù)據(jù)

3. 寫(xiě)法

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

您可能感興趣的文章:

相關(guān)文章

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