为何Vue中用箭头函数定义methods内的方法无法生效？

这问题的核心在于箭头函数的this指向规则和Vue对methods的绑定逻辑不匹配，我来给你拆解清楚：

首先，当你用普通函数定义buttonClicked时，Vue在实例化过程中会自动把这个方法绑定到Vue实例（也就是你的app对象）上。这时候方法里的this就指向Vue实例，所以this.myLocalProperty能精准找到data里定义的属性，修改自然生效。

但换成箭头函数就不一样了——箭头函数没有自己的this，它的this是继承自外层词法作用域的。在你的代码场景里，这个外层作用域通常是全局上下文（浏览器里就是window对象，要是在模块环境里可能是undefined），根本不是Vue实例。这时候你写this.myLocalProperty，要么是访问window.myLocalProperty（这玩意儿根本不存在），要么直接因为this是undefined抛出报错，自然没法修改data里的值。

举个直观的对比：

• 普通函数写法：

  buttonClicked() {
    console.log(this); // 输出Vue实例对象
    this.myLocalProperty = newText; // 正常修改data属性
  }
  

• 箭头函数写法：

  buttonClicked: () => {
    console.log(this); // 输出window或undefined，不是Vue实例
    this.myLocalProperty = newText; // 无效操作，甚至报错
  }
  

最后给你个小提醒：Vue的methods、computed、watch这些核心选项里，都别用箭头函数定义成员，它们都依赖Vue实例的this上下文才能正常工作。

内容的提问来源于stack exchange，提问作者az2902