Прелазак на Вуе 3 Цомпоситион АПИ за бољи развој компоненти

Како су креатори Вуе-а најавили да ће Вуе 2 достићи крај живота до 31. децембра 2023. године, програмери се подстичу да пређу на Вуе 3.

Са овим прелазом долази Цомпоситион АПИ, функција која нуди модуларнији, декларативнији и безбеднији приступ изградњи Вуе апликација.

Преглед садржаја

Шта је АПИ за композицију?

АПИ за композицију представља промену парадигме у писању Вуе компоненти од Оптионс објекта. Овај стил развоја усваја више декларативни приступ, омогућавајући вам да се усредсредите на прављење Вуе апликације док апстрахујете детаље имплементације.

Мотивација за Цомпоситион АПИ

Креатори Вуе-а препознали су изазове приликом изградње сложених веб апликација са објектом Оптионс. Како су пројекти расли, управљање логиком компоненте постало је мање скалабилно и теже за одржавање, посебно у окружењима за сарадњу.

Традиционални приступ објеката Оптионс често је резултирао многим својствима компоненти, чинећи код изазовним за разумевање и одржавање.

Поред тога, поновно коришћење логике компоненти у различитим компонентама постало је гломазно. Раштркана логика унутар различитих кукица и метода животног циклуса такође је додала сложеност разумевању укупног понашања компоненте.

Предности АПИ-ја за композицију

АПИ за композицију доноси неколико предности у односу на АПИ за опције.

1. Побољшане перформансе

Вуе 3 уводи нови механизам рендеровања који се зове Проки-басед Реацтивити Систем. Овај систем обезбеђује боље перформансе тако што смањује потрошњу меморије и побољшава реактивност. Нови систем реактивности омогућава Вуе-у 3 да ефикасније рукује са великим дрвећем компоненти.

2. Мања величина пакета

Захваљујући оптимизованој бази кода и подршци за тресење дрвета, Вуе 3 има мању величину пакета од Вуе 2. Ово смањење величине пакета доводи до бржег времена учитавања и побољшаних перформанси.

Како направити квиз у Гоогле учионици

3. Побољшана организација кода

Користећи Цомпоситион АПИ, можете организовати код своје компоненте у мање функције које се могу поново користити. Ово промовише боље разумевање и одржавање, посебно за велике и сложене компоненте.

4. Поновна употреба компоненти и функција

Функције композиције се могу лако поново користити у различитим компонентама, олакшавајући дељење кода и креирање библиотеке функција за вишекратну употребу.

5. Боља подршка за ТипеСцрипт

Цомпоситион АПИ пружа свеобухватнију подршку за ТипеСцрипт, омогућавајући прецизније закључивање типа и лакшу идентификацију грешака у вези са типом током развоја.

Поређење између Оптионс Објецт и Цомпоситион АПИ

Сада када разумете теорију иза Цомпоситион АПИ-ја, можете почети да га користите у пракси. Да бисмо разумели предности Цомпоситион АПИ-ја, упоредимо неке кључне аспекте оба приступа.

Реактивни подаци у Вуе 3

Реактивни подаци су основни концепт у Вуе-у који омогућава да промене података у вашој апликацији аутоматски покрену ажурирања у корисничком интерфејсу.

Вуе 2 је базирао свој реактивни систем на методи Објецт.дефинеПроперти и ослањао се на објекат података који садржи сва реактивна својства.

Када сте дефинисали својство података са опцијом података у компоненти Вуе, Вуе је аутоматски умотао свако својство у објекат података са геттерима и сеттерима, новом функцијом ЕЦМА Сцрипт (ЕС6).

Ови геттери и сеттери су пратили зависности између својстава и ажурирали кориснички интерфејс када сте изменили било које својство.

Ево примера како креирате реактивне податке у Вуе 2 помоћу објекта Оптионс:

 <template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template><script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

Блок кода показује како се креирају променљиве у Вуе 2. Вуе аутоматски реактивира променљиве дефинисане у објекту података. Промене које унесете у својство података (број) ће изазвати ажурирање корисничког интерфејса ваше апликације.

12 најбољих софтвера и алата за надгледање мреже прегледаних у 2020

Поред тога, користили сте објекат метода да дефинишете ЈаваСцрипт функције које се користе унутар компоненте. У овом примеру, исечак дефинише методу инцремент(), која повећава вредност променљиве цоунт за 1.

Када пишете функције као методе у Вуе 2, такође сте морали да користите кључну реч тхис (тхис.цоунт++). Ова кључна реч вам омогућава да покажете на променљиве у објекту података. Изостављање ове кључне речи ће изазвати грешку када Вуе монтира компоненту.

Систем реактивности Вуе 3 заснован на проксију користи ЈаваСцрипт прокси за постизање реактивности, што нуди значајна побољшања перформанси и боље руковање реактивним зависностима.

Користите реф или реацтиве функције да дефинишете реактивне податке у Вуе 3. Функција реф креира једну реактивну референцу на вредност, док реацтиве функција креира реактивни објекат који садржи више својстава.

Ево примера како да креирате реактивне податке помоћу функције реф у Вуе 3:

 <script setup>
import { ref } from 'vue';const count = ref(0);
function increment() {
  count.value++;
}
</script>
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Да бисте користили функцију реф() у Вуе 3, прво морате да је увезете из вуе пакета. Функција реф() креира реактивне референце на променљиве.

Пример блока кода креира променљиву цоунт помоћу функције реф() и поставља њену почетну вредност на 0. Функција реф() враћа објекат са својством вредности. Ово својство вредности садржи стварну вредност бројања.

Директива @цлицк се користи за руковање догађајима кликова у Вуе-у.

Функције потребне у вашој компоненти дефинишете унутар блока за подешавање скрипте. Вуе 3 је заменио синтаксу метода дефинисања функција у Вуе 2 редовним ЈаваСцрипт функцијама.

Сада можете приступити реактивним варијаблама које сте дефинисали помоћу функције реф() тако што ћете додати метод вредности имену променљиве. На пример, блок кода користи цоунт.валуе да упућује на вредност променљиве цоунт.

Легално погледајте јавне информације за везу 3. степена на ЛинкедИн-у

Израчуната функција у Вуе 3

Функција Цомпутед је још једна Вуе функција која вам омогућава да дефинишете изведене вредности на основу реактивних података. Израчуната својства се аутоматски ажурирају кад год се њихове зависности промене, обезбеђујући да је изведена вредност увек ажурна.

У Вуе 2 дефинишете израчунато понашање помоћу израчунате опције унутар компоненте. Ево примера:

 <template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template><script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    incrementCount() {
      this.count++;
    }
  }
};
</script>

У горњем примеру, израчунато својство доублеЦоунт зависи од својства података бројања. Кад год се промени својство цоунт, Вуе поново израчунава својство доублеЦоунт.

У Вуе 3, Цомпоситион АПИ уводи нови начин дефинисања израчунатих својстава помоћу израчунате функције. Ево како то изгледа:

 <script setup>
import { ref, computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const incrementCount = () => {
  count.value++;
};
</script>
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

Морате да увезете израчунату функцију из вуе пакета да бисте могли да користите функцију.

Дефинисали сте доублеЦоунт израчунату референцу у горњем блоку кода помоћу израчунате функције. Вуе 3 се односи на израчунате особине као на израчунате референце, наглашавајући њихово ослањање на реактивне варијабле.

Израчуната функција узима геттер функцију као аргумент, која израчунава изведену вредност на основу реактивних података. У овом случају, израчуната референца доублеЦоунт враћа множење реактивне променљиве броја са 2.

Приметите да су блокови кода засновани на АПИ-ју за композицију читљивији и концизнији од оних написаних помоћу објекта Оптионс.

Научите да креирате прилагођене директиве у Вуе-у

Вуе 3 Цомпоситион АПИ представља моћан и флексибилан приступ организовању и поновном коришћењу кода у компонентама Вуе. Можете да направите више модуларних Вуе апликација које се могу одржавати помоћу АПИ-ја за композицију.

Вуе такође нуди додатне функције за максимизирање продуктивности током развоја веб апликација. Можете научити да креирате прилагођене директиве за поновно коришћење одређених функција у различитим деловима ваше Вуе апликације.