Вычисленные данные в компоненте Vue

Question

Я проходил курс обучения в Vue Mastery и нашел такой код:

    export default {
      data() {
        const times = []
        for (let i = 1; i <= 24; i++) {
          times.push(i + ':00')
        }
        return {
          event: this.createFreshEvent(),
          times,
          categories: this.$store.state.categories,
        }
      },
      methods: {
        createFreshEvent() {
          const user = this.$store.state.user
          return {
            organizer: user,
            attendees: []
          }
        }
      }
    }

• Почему иногда автор использует встроенный код для генерации данных (раз)?
• Почему для следующегоdata свойство он использует метод? Есть ли разница?
• Почему data() не имеет только объявлений, и мы не генерируем все вышеперечисленное в created() ловушке жизненного цикла?

Answer 1

По определению Vue created ловушка жизненного цикла: https://vuejs.org/v2/api/#created

Вызывается синхронно после создания экземпляра. На этом этапе экземпляр завершил обработку параметров, что означает следующее: наблюдение данных, вычисленные свойства, методы, обратные вызовы наблюдения / события. Однако этап монтирования еще не начался, и свойство $ el пока не будет доступно.

Таким образом, генерация данных в data() не вызовет никаких связанных вычисленных свойств, обратных вызовов watch / event. Если вы сгенерируете эти данные в created, а ваш компонент имеет, например, наблюдателя на times, будут ненужные обратные вызовы для просмотра.

Кстати, я запутался в инициализации categories изthis.$store.state.categories. Хранение общих данных из vuex в локальном data не требуется.

Answer 2

По вопросам 1 и 3 лучше спросить того, кто создал курс. Нет реальной причины делать это так. Я бы не стал делать это так, как он, но на самом деле использовал бы метод created или mounted.

Для вопроса 2:

В параметре данных компонента должна быть функция, чтобы каждый экземпляр мог поддерживать независимую копию возвращенного объекта данных ::

https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function