Vue中watcher为何在调用this时总是显示undefined？

本文共计550个文字，预计阅读时间需要3分钟。

在`watch`监听器中，尝试将新的值赋给`this.a`时出错，错误信息显示`undefined`。错误原因在于不能直接将箭头函数用作`this`上下文。箭头函数没有自己的`this`，它会捕获其所在上下文的`this`值。因此，在箭头函数中，`this`不会指向你预期的对象。

修改后的代码如下：

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

watch侦听器中，我们要将新的值赋给this.a出错

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

这里报错undefined，这里错误的原因是不能写成箭头函数。写成箭头函数后，this会取上下文，而不是组件里面的this了，正确写法为：

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

如下图:

看考链接：cn.vuejs.org/v2/api/#watch

PS：好吧，虽然问题可以解决，但是具体为什么不能写成箭头函数，讲实话，我现在也不懂，知道原理的可以给我评论，非常感谢。