Функция Vue 3 Composition API data ()

Читая документацию по API композиции для Vue 3, я не совсем понял, как новая композиция API работает. Не могли бы вы объяснить, куда делась функция data() и если она больше не используется, что использовать вместо нее?


javascript vue.js vuejs3 vue-component vue-composition-api
person Xth    schedule 28.09.2020    source источник
comment
Это не прошло. Просто обязательно определить data как функцию, а не просто объект.   -  person Matt Ellen    schedule 28.09.2020
comment
@MattEllen, я имею в виду, если вы посмотрите в документации API параметров vuejs.org/v2/api, вы можете найдите его слева в оглавлении, но в документации по Сomposition API он не упоминается композиция-api.vuejs.org/api.html Вот что меня смутило.   -  person Xth    schedule 28.09.2020
comment
В этой статье показаны существенные отличия. Как я уже сказал, разница с data в том, что это не может быть простой объект, это должна быть функция.   -  person Matt Ellen    schedule 28.09.2020
comment
@MattEllen data всегда должен был быть функцией (по крайней мере, в Vue 2), и хотя Vue 3 по-прежнему поддерживает API параметров, который включает метод data, API композиции не включает data().   -  person Robert Nubel    schedule 28.09.2020
comment
@RobertNubel совсем нет. В Vue2 data должно было быть только функцией в components в основном приложении, это может быть простой объект.   -  person Matt Ellen    schedule 28.09.2020
comment
@MattEllen ah - я предполагаю, что OP имеет в виду метод data () для создания компонента, а не опору данных, передаваемую при создании экземпляра Vue. Вы правы в последнем.   -  person Robert Nubel    schedule 28.09.2020

Ответы (2)


arrow_upward
22
arrow_downward

В новом Composition API все переменные, которые вы ранее определили в data(), просто возвращаются из вашей setup() функции как обычные переменные с реактивными значениями. Например, компонент Vue 2.0, который имеет такую ​​функцию данных:

data() {
  return {
    foo: 1,
    bar: { name: "hi" }
  }
}

становится этой setup() функцией в Vue 3:

setup() {
  const foo = ref(1);
  const bar = reactive({ name: "hi" });

  return { foo, bar }
}

Помощник ref обертывает значение, не являющееся объектом, для реактивности, а reactive обертывает объект. Это раскрывает основные принципы Vue более четко, чем старый способ, когда упаковка происходила волшебным образом за кулисами, но в остальном будет вести себя так же. Что мне лично нравится в этом, так это то, что ваша setup() функция может создавать ваш объект на ходу, сохраняя при этом связанные вещи вместе, позволяя ему рассказывать связную историю и не требуя прыжков по разным разделам.

person Robert Nubel    schedule 28.09.2020
comment
Кроме того, вы по-прежнему можете получить доступ к переменным, возвращаемым setup() в API параметров, например, с помощью this.foo. - person volume one; 03.06.2021

arrow_upward
2
arrow_downward

Композиция - это новая функция, поставляемая с Vue 3, и в качестве плагина для Vue 2 она не заменяет старый параметр api, но их можно использовать вместе в одном компоненте.

Api композиции по сравнению с вариантом api:

  1. Соберите функциональные возможности логики в кусочки логики многократного использования.
  2. Используйте один вариант: функция setup, которая выполняется перед созданием компонента после разрешения свойств и служит точкой входа для API композиции.
  3. Определите свой старый параметр данных как ref или reactive свойства
  4. вычисляется и смотреть определяется как: watch(...,()=>{...}) или computed(()=>{...})
  5. Методы определены как простые функции javascript.
  6. setup используется вместо созданного хука и имеет в качестве параметров _7 _ и context
  7. Такие хуки, как mounted, можно использовать как onMounted(()=>{...}), learn more.
person Boussadjra Brahim    schedule 28.09.2020