Vue.js

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

# Обзор

  • КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: опция локального состояния 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

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

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





 
 

 
 



<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>
1
2
3
4
5
6
7
8
9
10
11

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

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

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

const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

{
  "user": {
    "id": 2,
    "name": "Jack"
  }
}
1
2
3
4
5
6

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

{
  "user": {
    "id": 2
  }
}
1
2
3
4
5

Флаг сборки для миграции: OPTIONS_DATA_FN

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

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

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

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

Флаги сборки для миграции:

  • OPTIONS_DATA_FN
  • OPTIONS_DATA_MERGE

← Добавлена опция emits →