Когда использовать хук setup () API Vue Composition

Question

Поскольку композиция api из Vue портирована для текущей версии v2 , очевидно, мы можем начать использовать ее до выпуска новой версии.

В примерах, как правило, представлен недавно введенный setup() хук, и он изображен только и / или вместе с основными функциями JS .

На первый взгляд, я подумал, что это просто место для инициализации реактивных данных, и я бы спросил что-то вроде: в каких случаях его следует использовать .

Однако, когда вы копаете больше, создается впечатление, что составной API не может быть реализован без него. Итак, что же такое с этим крючком и можно ли его использовать с полями data, methods, computed и т. Д. Вне его?

Answer 1

API композиции - это действительно еще один способ сделать то же самое, что и раньше. В основном:

• Локальное состояние в data заменяется вызовом reactive.
• Крючки mounted, beforeDestroy и т. Д. Заменяются подписками наonMounted, onUnmounted и т. Д.
• Объявления в watch заменяются вызовами свойств watch.
• computed заменяются вызовом computed вобъект, переданный reactive.
• Функция setup возвращает объект, содержащий композицию всех вещей, которые должны оставаться доступными извне функции настройки, в частности из шаблона. И эта функция заменяет старую methods.

Я бы спросил что-то вроде: , в каких случаях его следует использовать .

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

См. Также: Мотивация создателя Vue .

Answer 2

Да, API компоновки реализован методом setup(). Использование setup говорит Vue, что вы хотите использовать функциональный подход API композиции для реализации компонента.

Composition API - это набор аддитивных, основанных на функциях API, которые позволяют гибкокомпозиция логики компонентов.

пример: как реализовать data methods и computed в этом функциональном подходе

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

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

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

Примечание:API композиции также доступен с Vue.js 2 в качестве плагина (см. подробнее: https://vue -composition-api-rfc.netlify.com / )