Потребность в композиционном API в VUE

Что ж, в настоящее время в мире Vue, тема Hot🔥-это API композиции, API, основанный на функциях, представленный в VUE 3.0. В этой статье мы узнаем, что было в этом новом API, а затем как использовать API на основе функций. Я стараюсь объяснить это как можно более просто, чтобы понять это и для начинающих.

В этой статье суммируется необходимость в композиционном API, описанном в #Rfc & Некоторые примеры.

Итак, начнем 💻

Перед тем, как мы глубоко погрузимся, нет необходимости паниковать, что композиционный API резко изменит Vue. Композиционный API является дополнением к существующей функции, поэтому нет нарушающих изменений в Vue 3.0 Кроме того, команда VUE создала плагин ( Vue-Composition ), который совместим с Vue 2.x.

Сначала посмотрим несколько вопросов!

Какова была необходимость в композиционном API?

По мере того, как популярность возрастает день за днем, люди также начали принимать Vue для приложения для крупного и корпоративного уровня. Из -за того, что было много случаев, когда компоненты для таких приложений постепенно растут со временем, и есть момент, когда было трудно поддерживать и читать с использованием архитектора одного файла компонентов. Следовательно, необходимость тормозного компонента логично возникает, и с существующим API Vue это было невозможно.
Вместо того, чтобы добавлять другую новую концепцию, предлагаются композиционные API, которые в основном разоблачают основные возможности Vue, такие как создание и наблюдение за реактивным состоянием – в качестве автономных функций, и этот API помогает писать чистый и многократный код среди нескольких компонентов.

Каковы были недостатки альтернативных подходов, которые есть у Vue?

Перед введением нового API Vue есть другие альтернативы, которые предлагают повторную возможность использования среди компонентов, таких как Mixins, HOC (компонент высокого порядка), слот для общего пользования, но со всеми подходами поставляются с их собственными недостатками, из -за которых они не широко используются.

Миксель – это было трудно поддерживать, как только приложение имеет некоторое количество микшинов. Разработчик должен посетить каждый микшин, чтобы увидеть данные, из какого микшина.

HOC – этот шаблон не очень хорошо сочетается с подходом VUE SFC, поэтому широко не рекомендуется или популярно использовать среди разработчиков VUE.

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

Слава от команды Vue 👏

Проще говоря, композиционный API помогает

Используйте низкоуровневые API Vue, которые не имели место с Vue 2.x
Эффективно Организуйте и напишите многократный код, так как API основан на функциях.
Улучшает читабельность кода, разделяя общую логику на функции.
Достичь разделения кода и сухого принципа.
Лучше используйте TypeScript с приложением VUE.

Примечание. Поскольку Vue очень легко запустить, то есть Composition API.

Давайте построим одно простое приложение, чтобы пройти через API.

1) Импортный плагин Vue-Composition

npm install @vue/composition-api --save

2) Установите плагин в приложение VUE, прежде чем импортировать любые другие API. Идея зарегистрировать его перед любым другим плагином заключается в том, что Composition API может использоваться в других плагинах так же, как это встроенная функция Vue.

import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

3) Используя API композиции, давайте создадим небольшую функциональность, чтобы лучше понять API. Создайте новую папку, называемую Композиция-FNS и создать файл с именем Toggle.js

Здесь мы импортируем REF из API и используем его, мы объявляем переменную ISVISIBLE и которая имеет значение по умолчанию FALSE.

В дополнение к этому есть метод под названием перевернуть который отвечает для переключения значения Isvisible.

import { ref } from "@vue/composition-api";

export const useToggle = () => {
  const isVisible = ref(false);

  const toggle = () => {
    return (isVisible.value = !isVisible.value);
  };

  return {
    isVisible,
    toggle
  };
};

4) Сначала импортируйте USETOGGLE Функция, а затем для использования приведенного выше API композиции в компоненте API предоставляет setup () функция Эта функция настройки включает в себя Данные, методы, вычисленные и наблюдатель объект компонента VUE.

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

import { useToggle } from "./composition-fn/toggle";
setup() {
  const { isVisible, toggle } = useToggle();
  // expose to template
  return {
    isVisible,
    toggle
  };
}

настройка Функция может иметь два аргумента.

Реквизиты – свойства, передаваемые компонентам, и они реагируют, поскольку любое изменение в реквизитах, которое приводит к повторному рендерингу компонента.
Контекст – который выбрал свойства, которые были ранее переданы компоненту с использованием это Анкет

Контекст имеет ниже функции/свойства

context.refs
context.emit
context.attrs
context.slots

Как настройка Функция – это сердце композиции API, очень важно понять его.

5) В конце концов, шаблон состоит из кнопки и Div, чтобы показать и скрыть значение переключения.

{{ isVisible }}

Здесь работает CodeSandbox

Я надеюсь, что это поможет вам начать работу с API композиции и отправиться в путь к Vue 3.0!

Желаю вам удачи 😃

Оригинал: “https://dev.to/varit05/the-need-for-composition-api-in-vue-2ii4”

Какова была необходимость в композиционном API?

Каковы были недостатки альтернативных подходов, которые есть у Vue?

Читайте ещё по теме: