解決vue偵聽器watch,調(diào)用this時出現(xiàn)undefined的問題
更新時間：2020年10月30日 11:38:35 作者：猶有傲霜枝
這篇文章主要介紹了解決vue偵聽器watch,調(diào)用this時出現(xiàn)undefined的問題，具有很好的參考
watch偵聽器中，我們要將新的值賦給this.a出錯
watch: {
value: (newV, oldV) => {
this.a = newV;
}
}
這里報錯undefined，這里錯誤的原因是不能寫成箭頭函數(shù)。寫成箭頭函數(shù)后，this會取上下文，而不是組件里面的this了，正確寫法為：
watch: {
value: function(newV, oldV) {
this.a = newV;
}
}
如下圖:
看考鏈接：https://cn.vuejs.org/v2/api/#watch
PS：好吧，雖然問題可以解決，但是具體為什么不能寫成箭頭函數(shù)，講實話，我現(xiàn)在也不懂，知道原理的可以給我評論，非常感謝。
來自yyf994的評論解答：
var app = new Vue({
el: '#app',
data: {
a: 1
},
watch: {
a:()=> {
console.log(this)
}
},
methods: {
onClick() {
this.a++;
}
}
})
在babel 編譯后是這樣子的
"use strict";
var _this = void 0;
var app = new Vue({
el: '#app',
data: {
a: 1
},
watch: {
a: function a() {
console.log(_this);
}
},
methods: {
onClick: function onClick() {
this.a++;
}
}
});
因為箭頭函數(shù) 的 函數(shù)體內(nèi)的this對象，就是定義時所在的對象，而不是使用時所在的對象。
補充知識：vue watch用法和沒反應(yīng)的原因 =>看看下面是不是還有一個watch
我就廢話不多說了，大家還是直接看代碼吧~
watch: {
stop: function(newVal, old){ //非josn用法
console.log(newVal)
},
'form.fdnDct': function(newVal, old){ //josn用法
console.log(newVal)
},
}
//這也是一種用法
watch: {
'browse_integral_info.buy':'RMB', //購買積分轉(zhuǎn)化成人民幣
'browse_integral_info.give':'GIVE', //完成邀請瀏覽任務(wù)贈送
'bargain_integral_info.give':'BARGAINGIVE',
deep:true,
},
methods: {
RMB: function(){
this.RMBs = this.browse_integral_info.buy/100
},
},
以上這篇解決vue偵聽器watch,調(diào)用this時出現(xiàn)undefined的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue在H5 項目中使用融云進行實時個人單聊通訊,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue 自定義icon的圖標(biāo)的步驟，文中大概給大家分為兩步驟，通過實例圖文相結(jié)合給大家介紹的非常詳細,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了vant之van-list的使用及踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
我們在做了用戶登錄后,就會讓用戶跳轉(zhuǎn)到個人中心,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue+Element做個個人中心的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
vue 自定義提示框(Toast)組件的實現(xiàn)代碼
這篇文章主要介紹了vue 自定義提示框(Toast)組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了快速修改antd?vue單個組件的默認(rèn)樣式方式，具有很好的參考價值，希望對大家有所幫助。2022-08-08
這篇文章主要介紹了vue如何實現(xiàn)在線編輯excel問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別
本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07