watch偵聽(tīng)器中，我們要將新的值賦給this.a出錯(cuò)

watch: { value: (newV, oldV) => { this.a = newV; }}

這里報(bào)錯(cuò)undefined，這里錯(cuò)誤的原因是不能寫成箭頭函數(shù)。寫成箭頭函數(shù)后，this會(huì)取上下文，而不是組件里面的this了，正確寫法為：

watch: { value: function(newV, oldV) { this.a = newV; }}

如下圖:

看考鏈接：https://cn.vuejs.org/v2/api/#watch

PS：好吧，雖然問(wèn)題可以解決，但是具體為什么不能寫成箭頭函數(shù)，講實(shí)話，我現(xiàn)在也不懂，知道原理的可以給我評(píng)論，非常感謝。

來(lái)自yyf994的評(píng)論解答：

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++; } }});

因?yàn)榧^函數(shù) 的 函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

補(bǔ)充知識(shí)：vue watch用法和沒(méi)反應(yīng)的原因 =>看看下面是不是還有一個(gè)watch

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

watch: { stop: function(newVal, old){ //非josn用法 console.log(newVal) }, ’form.fdnDct’: function(newVal, old){ //josn用法 console.log(newVal) }, } //這也是一種用法 watch: { ’browse_integral_info.buy’:’RMB’, //購(gòu)買積分轉(zhuǎn)化成人民幣 ’browse_integral_info.give’:’GIVE’, //完成邀請(qǐng)瀏覽任務(wù)贈(zèng)送 ’bargain_integral_info.give’:’BARGAINGIVE’, deep:true, }, methods: { RMB: function(){ this.RMBs = this.browse_integral_info.buy/100 }, },

以上這篇解決vue偵聽(tīng)器watch,調(diào)用this時(shí)出現(xiàn)undefined的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。