问题复现:
在优化代码时,尝试将watch中的函数改造为箭头函数:
原函数:
'$store.state.app.clearScreenOn'(val) {
this.clearScreenOn = val;
}
改造后的函数:
$store.state.app.clearScreenOn':(val)=> {
console.log(val)
}
但是这时代码报错,提示:
[Vue warn]: Error in callback for watcher "$store.state.app.clearScreenOn": "TypeError: Cannot set properties of undefined (setting 'clearScreenOn')"
通过学习,最后找到其中的原因:
上述函数报错是由于箭头函数中this指向的问题。
箭头函数本身没有this,里面的this指向的是其上下文中的this。但是watch里监视属性变化的箭头函数没有上下文调用,所以最后就会报出undefined的错误。