Опцию data необходимо указывать только функцией

breaking

Обзор

• КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: опция локального состояния data компонента больше не принимает обычный объект JavaScript и ожидает объявление функции.

Синтаксис в 2.x

В 2.x разработчики могли определять опцию data используя как object, так и function.

Например:

<!-- Декларация объекта -->
<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>

<!-- Декларация функции -->
<script>
  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  })
</script>

Хотя это обеспечило некоторое удобство с точки зрения того, что корневые экземпляры имеют общее состояние, это привело к путанице, потому что подобное возможно только на корневом экземпляре.

Что изменилось в 3.x

В 3.x опция data была стандартизирована чтобы принимать только функцию, которая возвращает объект.

Используя пример выше, потребуется только одно изменение в реализованном коде:

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>

Изменение поведения при слиянии с примесями

Кроме того, слияние data() из компонента и его примесей или расширений теперь будет выполняться неглубоко:

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}

const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}

Во Vue 2.x в результате $data была бы такой:

{
  user: {
    id: 2,
    name: 'Jack'
  }
}

Во Vue 3.х результат будет таким:

{
  user: {
    id: 2
  }
}

Стратегия миграции

Для пользователей, полагающихся на объявление объектом рекомендуем:

• Извлечь общие данные во внешний объект и использовать его в качестве значения data
• Переписать ссылки на общие данные, чтобы указывали на новый общий объект