Question

这是：

saveUpdate() {
   // Some code
}

与：

saveUpdate: function() {
   // Some code
}

是否存在用于在对象（特别是Vue.js组件）上定义方法的最佳实践（ES6）方法？

更多上下文：我的Vue.js应用程序在生产中正确触发的方法遇到了麻烦。我定义的方法似乎在开发中可以正常工作-但是一旦编译用于生产，它们似乎就不会以相同的方式运行。我在Vue.js文档中已经读到，所有方法都需要定义为NEW单独的函数，现在我想知道是否定义方法的方式；实际上是不正确的。

更广泛的示例：

...,
methods: {
  saveUpdate() {
   // Some code
  }
},
...

我应该做类似的事情吗？

...,
methods: {
  saveUpdate: () => {
   // Some code
  }
},
...

什么是现代的最佳实践或公认的方法？还是我看错地方了，我的声明就象它们的样子一样好？

Answer 1

是的，这是

saveUpdate() {
   // Some code
}

是语法糖吗？

saveUpdate: function() {
   // Some code
}

两者之间的语法没有什么不同。如果您想使用箭头功能，我相信您需要使用第二种形式：

saveUpdate: () => {
   // Some code in a lexical `this` scope (not useful in Vue computed).
}

还要注意，->语法无效-它是 fat </ em>箭头{{1}}。尽管正如Phil在评论中指出的那样，但您很可能不想在Vue项目中使用箭头功能，因为您将失去与=>的绑定，这就是您与组件交互的方式。

Answer 2

pget https://username:password@example.com/directory-structure/filename.ext是saveUpdate() {...}的ES6快捷方式，所以是的，它们是相同的。由于Vue应用程序通常是可移植的，因此没有理由不使用第一个选项。

如果一个函数在应用程序内重用，则可以单独声明它：

saveUpdate: function() {...}

不应将箭头用于期望以export function saveUpdate() {...} ... export default { methods: { saveUpdate } }访问Vue实例的函数。

如the documentation所述：

所有生命周期钩子都以其此上下文指向   Vue实例调用它。

请勿在options属性或回调中使用箭头功能，例如   this或created: () => console.log(this.a)。由于箭头功能没有this，因此   将被视为任何其他变量，并在词汇上进行查找   父作用域，直到找到为止，通常会导致诸如vm.$watch('a', newValue => this.myMethod())或Uncaught TypeError: Cannot read property of undefined之类的错误。

在Javascript对象上定义方法/功能

2 个答案: