Vue watch侦听器中的函数与箭头函数

ES6用的越来越多，箭头函数写顺了，函数大部分都写成了箭头函数。在Vue的watch中也顺手使用，然而出现了问题。组件中的数据并不能被同步修改。

箭头函数写法

watch: {
    studentId: (newData, oldData) => {
      this.disabled = !newData
      console.log(this, 'this')
    }
  },

这里的this,并不是Vue的组件this,console结果如下：

function 写法

watch: {
    studentId: function (newData, oldData) {
       this.disabled = !newData
       console.log(this, 'this')
     }
  }

此时的this才是Vue组件，console结果如下：

总结：

箭头函数会改变this的指向，在Vue组件中，最好不要随便使用箭头函数。特别是watch以及生命周期中。！文档也有相应的提示