Javascript VueJS是否在其methods属性下区分函数声明格式？

我们的团队正在进行VueJS项目，我注意到一些方法函数是这样声明的：

methods: {
    doSomething() {
        console.log(this) // insance
    }
}

方法：{
doSomething:函数（）{
//在这里做。。。
}
}

其他文件采用这种格式：

方法：{
doSomething（）{
//在这里做。。。
}
}

这两种格式都工作得很好，如果我正确地记住了我的javascript，那么第二种方法只是函数声明的javascript速记

---

但是VueJS是否区分了这两种格式？声明VueJS方法的最佳/首选方法是什么？VueJS计算函数的格式是否必须与方法函数的格式相同？

还有一种方法可以声明方法

methods: {
    doSomething: () => {
        //do it here...
    }
}

实际上，你们的声明方式是相同的，你们是对的——你们可以用同样的方式使用这两种方式

但请记住，如果您需要访问方法（

此

）内部的组件实例，则arrow函数不允许您这样做

methods: {
    doSomething: () => {
        console.log(this) // undefined
    }
}

在这种情况下，您几乎总是必须这样使用：

methods: {
    doSomething() {
        console.log(this) // insance
    }
}

---

这与Vue无关

从ECMAScript 2015开始，介绍了对象初始值设定项上方法定义的较短语法。它是指定给方法名称的函数的缩写

给定以下代码：

var obj = {
  foo: function() {
    /* code */
  },
  bar: function() {
    /* code */
  }
};

您现在可以将其缩短为：

var obj = {
  foo() {
    /* code */
  },
  bar() {
    /* code */
  }
};

---

Ref:

这两个都是对象，它们可以以任何方式写入，这与vue无关，与这里的js引擎无关，两者之间没有任何区别。关于最佳实践，您应该遵循其官方指南。某些时候，如果你的函数很小，你可以跳过

methods:{
  xyz(){
  }
}

并将其写为

methods:{
  xyz:()=> return something;
}

---

好吧，不，没什么区别。然而，我发现如果我使用速记，然后通过最小化程序运行.js文件，最小化程序会抛出一个异常。所以我选择了

doSomething:function（）

两者都是相同的。你选哪一个取决于你的品味。计算属性可以用相同的方式定义，但也允许分别指定getter和setter。参见@MichaelTranchida

我发现如果我使用速记，然后通过最小化程序运行.js文件，最小化程序会抛出异常。

这是真的吗？我们用Webpack构建代码，并将其缩小，没有任何错误。或者Webpack正在发挥它的一些传输魔力，将速记声明转换为经典声明？@jimx Dunno，我在Visual Studio中使用bundler/minimizer，我认为它是由Mads制作的。“那个对我来说是个例外。”MichaelTranchida谢谢你的澄清。我会记住这一点的。所以，我想是新旧交替吧？如果我们想遵循ES6标准，那么就使用速记。你可以随心所欲地遵循，当然新的标准看起来很简单易读。非常好的输入，谢谢！箭头函数确实值得注意，尤其是在使用VueJS时。这可能是真的，但同样，它与Vue无关。箭头函数的特性是它们使用定义范围而不是调用范围。