今天就跟大家聊聊有關解決vue偵聽器watch,調用this時出現問題的方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
watch偵聽器中，我們要將新的值賦給this.a出錯
watch: {
value: (newV, oldV) => {
this.a = newV;
}
}這里報錯undefined，這里錯誤的原因是不能寫成箭頭函數。寫成箭頭函數后，this會取上下文，而不是組件里面的this了，正確寫法為：
watch: {
value: function(newV, oldV) {
this.a = newV;
}
}如下圖:
看考鏈接：https://cn.vuejs.org/v2/api/#watch
PS：好吧，雖然問題可以解決，但是具體為什么不能寫成箭頭函數，講實話，我現在也不懂，知道原理的可以給我評論，非常感謝。
來自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++;
}
}
});因為箭頭函數 的 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
補充知識：vue watch用法和沒反應的原因 =>看看下面是不是還有一個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', //購買積分轉化成人民幣
'browse_integral_info.give':'GIVE', //完成邀請瀏覽任務贈送
'bargain_integral_info.give':'BARGAINGIVE',
deep:true,
},
methods: {
RMB: function(){
this.RMBs = this.browse_integral_info.buy/100
},
},看完上述內容，你們對解決vue偵聽器watch,調用this時出現問題的方法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
