vue watch監(jiān)聽取不到this指向的數(shù)問(wèn)題
vue watch監(jiān)聽取不到this指向的數(shù)
同事問(wèn)我，watch里this指向的數(shù)值，別的地方卻可以打印出來(lái)。工具也能看到數(shù)值，但打印出來(lái)卻是undifined，先看看代碼：
懶得打字了直接上截圖吧
ps：
在Vue組件中，如果你在watch選項(xiàng)中訪問(wèn)this指向的數(shù)據(jù)，有可能無(wú)法獲取到數(shù)據(jù)，因?yàn)?code>this的指向在箭頭函數(shù)中不會(huì)指向Vue實(shí)例。
解決方法
使用常規(guī)函數(shù)而不是箭頭函數(shù)來(lái)定義watch中的回調(diào)。
javascriptwatch: {
apiData: function(newVal, oldVal) {
// 在這里，this指向Vue實(shí)例，可以訪問(wèn)this.apiData
}
}如果你使用箭頭函數(shù)，并且需要訪問(wèn)Vue實(shí)例的方法或數(shù)據(jù)，可以在data中定義一個(gè)變量來(lái)存儲(chǔ)this的引用。
javascriptdata() {
return {
vm: this // 存儲(chǔ)Vue實(shí)例的引用
};
},
watch: {
apiData: (newVal, oldVal) => {
// 使用 this.vm 來(lái)訪問(wèn)Vue實(shí)例的數(shù)據(jù)和方法
}
}使用watch的第三個(gè)參數(shù)immediate，設(shè)置為true可以讓watch立即觸發(fā)。
javascriptwatch: {
apiData: {
handler: (newVal, oldVal) => {
// 處理數(shù)據(jù)變化
},
immediate: true // 組件創(chuàng)建后立即觸發(fā)一次
}
}確保你的watch監(jiān)聽的數(shù)據(jù)在組件創(chuàng)建之前已經(jīng)被定義，否則可能無(wú)法觸發(fā)watch。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中vue-echarts講解及常用圖表實(shí)現(xiàn)方案(推薦)
這篇文章主要介紹了vue項(xiàng)目中vue-echarts講解及常用圖表方案實(shí)現(xiàn),主要針對(duì)代碼示例中的內(nèi)容進(jìn)行問(wèn)題講解，詳細(xì)代碼在文章中給大家提到，需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-03-03
Vue3?Suspense實(shí)現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載
Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時(shí)可以提供更好的用戶體驗(yàn),下面小編就來(lái)和大家詳細(xì)講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧2023-10-10
懶加載就是延時(shí)加載,即當(dāng)需要用到的時(shí)候再去加載,本文主要介紹了Vue圖片懶加載之Vue-Lazyload的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
Vue一個(gè)動(dòng)態(tài)添加background-image的實(shí)現(xiàn)
這篇文章主要介紹了Vue一個(gè)動(dòng)態(tài)添加background-image的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3限制table表格選項(xiàng)個(gè)數(shù)的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳解Vite的新體驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
v-bind和v-model是Vue.js中的兩個(gè)常用指令,它們?cè)诠δ芎陀猛旧嫌幸恍﹨^(qū)別,接下來(lái)小編就給大家具有講講vue中v-bind和v-model區(qū)別,感興趣的同學(xué)跟著小編一起來(lái)看看吧2023-08-08
vuedraggable實(shí)現(xiàn)簡(jiǎn)單拖拽功能
這篇文章主要為大家詳細(xì)介紹了vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
淺談Vue路由快照實(shí)現(xiàn)思路及其問(wèn)題
這篇文章主要介紹了淺談Vue路由快照實(shí)現(xiàn)思路及其問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06