Vue组件调用messageSubmit方法报Cannot read property 'messages' of undefined如何解决

完整报错内容为 Uncaught TypeError: Cannot read property 'messages' of undefined，触发自组件的messageSubmit方法，错误截图如下：

• 错误的核心是messageSubmit方法使用箭头函数定义导致this指向异常。
• 箭头函数没有独立的this绑定，它的this会继承定义时外层作用域的this值。在Vue组件的methods配置中使用箭头函数定义方法，this不会指向Vue组件实例，严格模式下此处this值为undefined，因此访问this.messages时抛出对应错误。

将messageSubmit的箭头函数写法替换为普通函数写法即可，Vue会自动为普通函数定义的methods方法绑定this为当前组件实例，就能正常访问data中定义的属性：

export default {
  name: 'App',
  methods: {
    // 改为普通函数写法
    messageSubmit() {
      this.messages.push({ username: this.username, text: this.messageValue });
    }
  },
  data() {
    return {
      messageValue: '',
      messages: [],
      username: 'Nobody'
    };
  }
};

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