Vue中methods配置的两种不同函数声明写法有什么区别

两种写法在Vue运行时的表现完全一致，仅在语法规范和兼容性上有差异：

语法属性 #

第一种是ES6（ES2015）引入的对象方法简写语法，本质是第二种写法的语法糖，写法更简洁：

methods: {
  makeAuthorList() {
    return ...
  },
}

第二种是ES5标准的对象属性函数写法：

methods: {
  makeAuthorList: function(){
    return ...
  },
}

兼容性差异 #

• 简写语法需要运行环境支持ES6，或者项目配置了Babel等编译工具将ES6语法转译为ES5后才能正常运行
• 完整版function写法可以直接在所有支持ES5的浏览器环境中运行，不需要额外编译处理

实际使用注意 #

两种写法的this指向规则完全相同，调用时都会被Vue自动绑定到当前组件实例，不存在指向差异，性能上也没有任何区别。如果你的项目已经配置了语法编译工具，优先选简写写法即可。

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