解决vue侦听器watch,调用this时出现undefined的问题
时间：2022-10-21 09:44:24|栏目：vue|点击： 次
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
},
},
上一篇：利用vuex-persistedstate将vuex本地存储实现
栏 目：vue
本文标题：解决vue侦听器watch,调用this时出现undefined的问题
本文地址：http://www.codeinn.net/misctech/216900.html
