快捷導(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ì)造成第一次請求的數(shù)據(jù)是對的，換一個(gè)數(shù)據(jù)請求會(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue+echarts實(shí)現(xiàn)動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
vue寫的后臺(tái)管理，需要將表格數(shù)據(jù)繪制成圖表（折線圖，柱狀圖），圖表數(shù)據(jù)都是通過接口請求回來的。這篇文章主要介紹了vue+echarts 動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的相關(guān)知識(shí),需要的朋友可以參考下
2018-10-10
Vue.js中vue-property-decorator的使用方法詳解
vue-property-decorator是一個(gè)用于在Vue.js中使用TypeScript裝飾器的庫,它能夠簡化 Vue 組件的定義,使代碼更加簡潔和可維護(hù),它能夠簡化Vue組件的定義,使代碼更加簡潔和可維護(hù),本文將深入探討vue-property-decorator的使用方法,并展示如何在Vue.js項(xiàng)目中應(yīng)用它
2024-08-08
淺談Vue.js中ref ($refs)用法舉例總結(jié)
本篇文章主要介紹了淺談Vue.js中ref ($refs)用法舉例總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
Vue3中同時(shí)定義多個(gè)插槽的實(shí)現(xiàn)示例
本文主要介紹了Vue3中同時(shí)定義多個(gè)插槽的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
Vue-Cli 3.0 中配置高德地圖的兩種方式
這篇文章主要介紹了Vue-Cli 3.0 中配置高德地圖的兩種方式，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
vue中使用loadsh的debounce防抖函數(shù)問題
這篇文章主要介紹了vue中使用loadsh的debounce防抖函數(shù)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
Vue ECharts餅圖實(shí)現(xiàn)方法詳解
這篇文章主要介紹了在vue.js中，使用echarts組件，創(chuàng)建一個(gè)餅圖，并且獲取餅圖的數(shù)據(jù)和屬性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-12-12
Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解
這篇文章主要介紹了Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
Vue中關(guān)于this指向的問題示例詳解
在Vue中，方法體里用this調(diào)用vue實(shí)例的數(shù)據(jù)，有時(shí)會(huì)指向window，導(dǎo)致調(diào)用失敗報(bào)錯(cuò)，這篇文章主要介紹了Vue中關(guān)于this指向的問題 ,需要的朋友可以參考下
2022-07-07