在 Javascript 对象上定义 methods/functions

Question

这是：

saveUpdate() {
   // Some code
}

等同于：

saveUpdate: function() {
   // Some code
}

是否有最佳实践 (ES6) 方法来定义对象（具体来说，Vue.js 个组件）的方法？

更多背景信息：我的 Vue.js 应用程序在生产中正确触发方法时遇到问题。我定义的方法似乎在开发中运行良好——但一旦编译用于生产，它们的行为方式似乎就不一样了。我在 Vue.js 文档中读到所有方法都需要定义为新的独立函数，我现在想知道我定义方法的方式是否正确；实际上是不正确的。

更广泛的示例：

...,
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 箭头 =>。尽管正如 Phil 在评论中指出的那样，您很可能不想在 Vue 项目中使用箭头函数，因为您会失去与 this 的绑定，这是您与组件交互的方式。

Answer 2

saveUpdate() {...} 是 saveUpdate: function() {...} 的 ES6 快捷方式，所以是的，它们是相同的。由于 Vue 应用程序通常是转译的，因此没有理由不使用第一个选项。

如果一个函数在应用程序中重复使用，可以单独声明：

export function saveUpdate() {...}

...

export default {
  methods: { saveUpdate }
}

箭头不应该用于期望以 this.

访问 Vue 实例的函数

正如 the documentation 解释的那样：

All lifecycle hooks are called with their this context pointing to the Vue instance invoking it.

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

在 Javascript 对象上定义 methods/functions

Defining methods/functions on Javascript Objects

javascript

function

object

ecmascript-6

vue.js