时间戳

首页 > 解决方案 > 在 Javascript 对象上定义方法/函数

javascript - 在 Javascript 对象上定义方法/函数

问题描述

这是：

saveUpdate() {
   // Some code
}

与以下相同：

saveUpdate: function() {
   // Some code
}

是否有最佳实践（ES6）方法来定义对象（特别是 Vue.js 组件）的方法？

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

更广泛的例子：

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

我应该做类似的事情：

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

什么是现代的、最佳实践或公认的方式来做到这一点？还是我找错地方了，而我的声明就跟它们一样？

标签： javascriptfunctionobjectvue.jsecmascript-6

解决方案

是的，这个：

saveUpdate() {
   // Some code
}

是语法糖：

saveUpdate: function() {
   // Some code
}

两者的语法没有什么不同。如果你想要一个箭头函数，我相信你需要使用第二种形式：

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

另请注意，->语法无效 - 它是一个粗箭头=>。尽管正如Phil在评论中指出的那样，您很可能不想在 Vue 项目中使用箭头函数，因为您将失去this与组件交互方式的绑定。

推荐阅读