关于watch中为什么不能写箭头函数

出错代码

 items: {
      handler: (newval) =>{
        console.log(this);//undefined
      },
    },

正确写法

 items: {
      handler: function (newval) {
        console.log(this);
      },
    },

对于ES6新增的箭头函数我们并不陌生，我们知道对于箭头函数来说，函数的this是无法改变的，而JS代码执行分为预解析阶段和执行阶段，在预解析阶段会将函数声明提前执行此时函数的this会指向全局对象，vue中在非严格模式下会指向window，在严格模式下this为undefined。默认为严格模式，这也是为什么在watch中使用箭头函数后this指向为undefined。

那为什么在watch中使用普通函数this会指向vm示例呢？因为watch的源码使用了call将this指向了Vue实例，而箭头函数中的this无法改变，因此在watch中使用箭头函数this不会是我们所期望的Vue实例。