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時出現undefined的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。