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

来自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的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。