Блог

Главная - Вопросы по программированию - Функция Vue 3 Composition API data ()

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

#javascript #vue.js #vue-component #vuejs3 #vue-composition-api

#javascript #vue.js #vue-компонент #vuejs3 #vue-composition-api

Вопрос:

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

Обновлено 23.10.2021: документация по ссылке была обновлена и расширена, чтобы включить упоминание о введении data() в Composition API, поэтому этот вопрос теперь устарел.

Комментарии:

1. Он не исчез. Это просто обязательно определять data как функцию, а не просто объект.

2. @MattEllen я имею в виду, если вы посмотрите в документах Options API vuejs.org/v2/api , вы можете найти его слева в оглавлении, но в документации для Composition API отсутствует какое-либо упоминание об этом composition-api.vuejs.org/api.html Вот что меня смутило.

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

4. @MattEllen data всегда должен был быть функцией (по крайней мере, в Vue 2), и хотя Vue 3 по-прежнему поддерживает API опций, который включает data метод, API композиции не включает data() .

5. @MattEllen ah — я предполагаю, что OP ссылается на метод data() для построения компонента, а не на реквизит данных, переданный при создании экземпляра Vue. Вы правы в последнем.

Ответ №1:

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

 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() функция может создавать ваш объект на ходу, сохраняя при этом связанные вещи вместе, позволяя ему рассказывать целостную историю и не требовать перехода к разным разделам.

Комментарии:

1. Кроме того, вы все равно можете получить доступ к переменным, возвращаемым setup() в API опций, используя this.foo , например.

Ответ №2:

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

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

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

С script setup помощью синтаксиса вы могли бы объявлять свои реактивные данные, используя ref , reactive и computed …

 <script setup >
import { ref, reactive, computed } from 'vue'

const isActive = ref(false)
const user = reactive({ firstName: 'John', lastName: 'Doe', age: 25 })

const fullName = computed(() => user.firstName   ' '   user.lastName)

</script>