Vue JS: Разница между data() { return {} } и data: () => ({ })

Question

Заголовок: В чем разница между синтаксисами функции данных в Vue.js?

Тело сообщения:

Я изучаю функцию данных в Vue.js и мне любопытно, есть ли разница между двумя способами ее записи.

Обычно я вижу следующий синтаксис:

data () {
  return {
    obj
  }
}

А также использую синтаксис стрелочной функции ES6:

data: () => ({
  obj
})

Может ли кто-то объяснить, есть ли в этом различия и в каких случаях лучше использовать тот или иной синтаксис? Буду благодарен за разъяснения!

Answer 1

Это связано с синтаксисом ES5 или ES6. Если вы уже использовали стрелочные функции ()=> в своих предыдущих скриптах, то безопасно использовать следующий код:

// протестировано, и myData доступен в компоненте
data: () => { return {
    myData: 'someData',
    myStuff: this.stuffProp
} }

// это тоже работает
data: () => ({
    myData: 'someData',
    myStuff: this.stuffProp
})

Стрелочные функции захватывают контекст this из окружающей среды, поэтому вы сможете получить доступ к this.stuffProp внутри функции. Убедитесь, что вы применяете этот подход там, где это необходимо, чтобы избежать проблем с контекстом.

Vue JS: Разница между data() { return {} } и data: () => ({ })

1 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных