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