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