Определение методов / функций на объектах Javascript

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).
}

Также обратите внимание, что синтаксис -> недопустим - это жирная стрелка =>,Хотя, как отмечал Фил в комментариях, вам, скорее всего, не понадобится использовать функции стрелок в проекте Vue, поскольку вы потеряете привязку к this, как вы взаимодействуете со своим компонентом.

Answer 2

saveUpdate() {...} является ярлыком ES6 для saveUpdate: function() {...}, так что да, они одинаковы.Поскольку приложения Vue обычно переносятся, нет причин не использовать первый параметр.

Если функция повторно используется в приложении, ее можно объявить отдельно:

export function saveUpdate() {...}

...

export default {
  methods: { saveUpdate }
}

Стрелки не должны 't может использоваться для функций, которые ожидают доступа к экземпляру Vue как this.

As В документации объясняется:

Все хуки жизненного цикла вызываются с помощью thisконтекст, указывающий на экземпляр Vue, вызывающий его.

Не используйте функции стрелок для свойства параметров или обратного вызова, таких как created: () => console.log(this.a) или vm.$watch('a', newValue => this.myMethod()).Так как функция стрелки не имеет this, она будет обрабатываться как любая другая переменная и лексически просматриваться в родительских областях, пока не будет найдена, что часто приводит к ошибкам, таким как Uncaught TypeError: Cannot read property of undefined или Uncaught TypeError: this.myMethod is not a function.