使用watch监听属性,为什么不能使用箭头函数?

231 阅读1分钟

问题复现:

在优化代码时,尝试将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的错误。