如何避免在Vue中使用watch时，this指向undefined的问题？

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

在`watch`监听器中，我们尝试将新值赋给`this.a`时出错，错误信息显示`undefined`。错误的原因是无法将箭头函数赋值给`this.a`。这是因为箭头函数不会创建自己的`this`上下文，而是会捕获其所在上下文的`this`值。在赋值给`this.a`后，`this`会引用上下文，而不是期望的对象属性。改用普通函数后，`this`将正确引用对象，从而避免错误。

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