Узнайте, как перейти с API параметров на API композиции в Vue 3.
Поскольку создатели Vue объявили, что срок службы Vue 2 закончится к 31 декабря 2023 года, разработчикам рекомендуется перейти на Vue 3.
С этим переходом появляется Composition API — функция, которая предлагает более модульный, декларативный и типобезопасный подход к созданию приложений Vue.
Что такое API композиции?
Composition API представляет собой сдвиг парадигмы написания компонентов Vue с объект «Параметры». Этот стиль разработки использует более декларативный подход, позволяющий вам сосредоточиться на создании приложения Vue, абстрагируя при этом детали реализации.
Мотивация для Composition API
Создатели Vue осознали проблемы, возникающие при создании сложных веб-приложений с использованием объекта Options. По мере роста проектов управление логикой компонента становилось менее масштабируемым и трудным в обслуживании, особенно в средах совместной работы.
Традиционный объектный подход Options часто приводил к появлению множества свойств компонентов, что усложняло понимание и поддержку кода.
Кроме того, повторное использование логики компонентов в разных компонентах стало затруднительным. Разбросанная логика в различных перехватчиках и методах жизненного цикла также усложняла понимание общего поведения компонента.
Преимущества API композиции
API композиции имеет несколько преимуществ по сравнению с API параметров.
1. Улучшенная производительность
Vue 3 представляет новый механизм рендеринга, называемый системой реактивности на основе прокси. Эта система обеспечивает лучшую производительность за счет снижения потребления памяти и улучшения реактивности. Новая система реактивности позволяет Vue 3 более эффективно обрабатывать большее количество гигантских деревьев компонентов.
2. Меньший размер пакета
Благодаря оптимизированной кодовой базе и поддержке дерева, Vue 3 имеет меньший размер пакета, чем Vue 2. Такое уменьшение размера пакета приводит к ускорению загрузки и повышению производительности.
3. Улучшенная организация кода
Используя Composition API, вы можете организовать код вашего компонента в более мелкие функции многократного использования. Это способствует лучшему пониманию и обслуживанию, особенно для больших и сложных компонентов.
4. Возможность повторного использования компонентов и функций
Функции композиции можно легко повторно использовать в разных компонентах, что облегчает совместное использование кода и создание библиотеки повторно используемых функций.
5. Улучшенная поддержка TypeScript
Composition API обеспечивает более полную поддержку TypeScript, обеспечивая более точный вывод типов и упрощая выявление ошибок, связанных с типами, во время разработки.
Сравнение объекта параметров и API композиции
Теперь, когда вы понимаете теорию API композиции, вы можете начать использовать его на практике. Чтобы понять преимущества Composition API, давайте сравним некоторые ключевые аспекты обоих подходов.
Реактивные данные в Vue 3
Реактивные данные — это фундаментальная концепция Vue, которая позволяет изменениям данных в вашем приложении автоматически запускать обновления в пользовательском интерфейсе.
Vue 2 основал свою реактивную систему на Object.defineProperty метод и полагался на объект данных, содержащий все реактивные свойства.
Когда вы определили свойство данных с помощью параметра data в компоненте Vue, Vue автоматически обернул каждое свойство объекта данных геттерами и сеттерами — новой функцией ECMA Script (ES6).
Эти геттеры и сеттеры отслеживали зависимости между свойствами и обновляли пользовательский интерфейс при изменении любого свойства.
Вот пример того, как вы создаете реактивные данные во Vue 2 с помощью объекта Options:
Count: {{ count }}</p>