Vue组件created钩子调用方法报错：TypeError: Cannot read property 'mymethod' of undefined

这个报错的核心原因是你用了箭头函数来定义Vue组件的生命周期钩子(created)和方法(mymethod)，箭头函数的特性导致this没有指向Vue组件实例。

为什么箭头函数会导致这个问题？ #

箭头函数本身没有自己的this上下文，它会捕获定义时所在外层作用域的this，而不是Vue组件实例。Vue的设计逻辑是：

• 组件的methods里的方法会被自动绑定到组件实例，这样你在方法里能通过this访问实例的属性、其他方法；
• 生命周期钩子（比如created）在执行时，Vue会把this指向当前组件实例。

但箭头函数会破坏这个绑定机制：

1. 对于created: () => { ... }：这里的this指向的是定义这个组件时的外层上下文（比如在ES模块的严格模式下，this是undefined），自然找不到属于Vue实例的mymethod；
2. 对于mymethod: (x) => {alert(x)}：虽然这个方法里暂时没用到this，但如果后续需要访问this.xxx（比如实例数据、props），同样会因为this不指向实例而出错，而且不符合Vue的最佳实践。

修复方案 #

把箭头函数替换成普通函数即可，让Vue正常完成this的绑定：

export default {
  methods: {
    mymethod(x) {
      alert(x)
    },
  },
  created() {
    this.mymethod('success');
  },
}

简单总结：永远不要用箭头函数定义Vue组件的methods、生命周期钩子、watch回调等需要访问组件实例的选项，普通函数才能让Vue正确绑定this到组件实例上。

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