解决vue侦听器watch,调用this时出现undefined的问题

Z时代
2024-01-10
分类：IT

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
  },
 },