Migrace na Vue 3 Composition API pro lepší vývoj komponent

Vzhledem k tomu, že tvůrci Vue oznámili, že Vue 2 dosáhne konce životnosti do 31. prosince 2023, vývojářům se doporučuje přejít na Vue 3.

S tímto přechodem přichází Composition API, funkce, která nabízí modulárnější, deklarativní a typově bezpečný přístup k vytváření aplikací Vue.

Table of Contents

Co je to Composition API?

Composition API představuje posun paradigmatu v psaní komponent Vue z objektu Options. Tento styl vývoje využívá více deklarativní přístup, který vám umožňuje soustředit se na vytváření vaší aplikace Vue a zároveň abstrahovat detaily implementace.

Motivace pro Composition API

Tvůrci Vue rozpoznali výzvy při vytváření složitých webových aplikací s objektem Options. Jak projekty rostly, správa logiky komponenty byla méně škálovatelná a obtížnější se udržovat, zejména v prostředích spolupráce.

Tradiční objektový přístup Options často vedl k mnoha vlastnostem komponent, takže kód byl náročný na pochopení a údržbu.

Opětovné použití logiky součástí napříč různými součástmi se navíc stalo těžkopádným. Rozptýlená logika v rámci různých háčků a metod životního cyklu také přidala na složitosti pochopení celkového chování komponenty.

Výhody Composition API

Composition API přináší několik výhod oproti Options API.

1. Vylepšený výkon

Vue 3 zavádí nový renderovací mechanismus nazvaný Proxy-based Reactivity System. Tento systém poskytuje lepší výkon snížením spotřeby paměti a zlepšením reaktivity. Nový systém reaktivity umožňuje Vue 3 efektivněji zpracovávat více obřích komponentových stromů.

2. Menší velikost balíčku

Díky optimalizované kódové základně a podpoře protřepávání stromů má Vue 3 menší velikost balíčku než Vue 2. Toto zmenšení velikosti balíčku vede k rychlejšímu načítání a lepšímu výkonu.

Jak obnovit staré ovládací prvky Free Transform ve Photoshopu

3. Vylepšená organizace kódu

Využitím Composition API můžete uspořádat kód komponenty do menších, opakovaně použitelných funkcí. To podporuje lepší porozumění a údržbu, zejména u velkých a složitých součástí.

4. Opětovná použitelnost komponent a funkcí

Kompoziční funkce lze snadno znovu použít v různých komponentách, což usnadňuje sdílení kódu a vytváření knihovny opakovaně použitelných funkcí.

5. Lepší podpora TypeScript

Composition API poskytuje komplexnější podporu TypeScript, umožňuje přesnější odvození typu a snadnější identifikaci chyb souvisejících s typem během vývoje.

Porovnání mezi objektem Options a rozhraním Composition API

Nyní, když rozumíte teorii, která stojí za Composition API, můžete jej začít používat v praxi. Abychom pochopili výhody Composition API, porovnejme některé klíčové aspekty obou přístupů.

Reaktivní data ve Vue 3

Reaktivní data jsou základním konceptem ve Vue, který umožňuje, aby změny dat ve vaší aplikaci automaticky spouštěly aktualizace v uživatelském rozhraní.

Vue 2 založil svůj reaktivní systém na metodě Object.defineProperty a spoléhal na datový objekt obsahující všechny reaktivní vlastnosti.

Když jste definovali datovou vlastnost s možností data v komponentě Vue, Vue automaticky zabalila každou vlastnost do datového objektu pomocí getterů a nastavovačů, což je nová funkce ECMA Script (ES6).

Tyto gettry a settery sledovaly závislosti mezi vlastnostmi a aktualizovaly uživatelské rozhraní, když jste upravili jakoukoli vlastnost.

Zde je příklad toho, jak vytváříte reaktivní data ve Vue 2 pomocí objektu Options:

 <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>

Blok kódu ukazuje, jak vytvořit proměnné ve Vue 2. Vue automaticky aktivuje proměnné definované v datovém objektu. Změny, které provedete ve vlastnosti dat (počet), způsobí aktualizaci uživatelského rozhraní vaší aplikace.

8 SOCKS5 proxy pro lepší výkon

Navíc jste použili objekt metod k definování funkcí JavaScriptu používaných v rámci komponenty. V tomto příkladu fragment definuje metodu increment(), která zvýší hodnotu proměnné count o 1.

Při psaní funkcí jako metod ve Vue 2 jste také potřebovali použít klíčové slovo this (this.count++). Klíčové slovo this vám umožňuje ukázat na proměnné v datovém objektu. Vynechání klíčového slova this způsobí chybu, když Vue připojí komponentu.

Systém reaktivity založený na proxy Vue 3 využívá k dosažení reaktivity proxy JavaScript, což nabízí výrazné zlepšení výkonu a lepší zpracování reaktivních závislostí.

Pomocí funkce ref nebo reactive definujete reaktivní data ve Vue 3. Funkce ref vytvoří jeden reaktivní odkaz na hodnotu, zatímco reaktivní funkce vytvoří reaktivní objekt obsahující více vlastností.

Zde je příklad, jak vytvořit reaktivní data pomocí funkce ref ve Vue 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>

Chcete-li použít funkci ref() ve Vue 3, musíte ji nejprve importovat z balíčku vue. Funkce ref() vytváří reaktivní odkazy na proměnné.

Příklad bloku kódu vytvoří proměnnou počet pomocí funkce ref() a nastaví její počáteční hodnotu na 0. Funkce ref() vrátí objekt s vlastností value. Tato vlastnost value uchovává skutečnou hodnotu počtu.

Direktiva @click se používá ke zpracování událostí kliknutí ve Vue.

Funkce potřebné ve vaší komponentě definujete v bloku nastavení skriptu. Vue 3 nahradil syntaxi metod definování funkcí ve Vue 2 běžnými funkcemi JavaScriptu.

Nyní můžete přistupovat k reaktivním proměnným, které jste definovali pomocí funkce ref() připojením metody value k názvu proměnné. Například blok kódu používá count.value k odkazování na hodnotu proměnné count.

Několik dalších tipů pro Mac OS X, které můžete tento víkend vyzkoušet

Vypočítaná funkce ve Vue 3

Funkce Computed je další funkcí Vue, která umožňuje definovat odvozené hodnoty na základě reaktivních dat. Vypočítané vlastnosti se automaticky aktualizují vždy, když se změní jejich závislosti, což zajišťuje, že odvozená hodnota je vždy aktuální.

Ve Vue 2 definujete vypočítané chování pomocí vypočítané možnosti v rámci komponenty. Zde je příklad:

 <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>

Ve výše uvedeném příkladu závisí vypočítaná vlastnost doubleCount na vlastnosti count data. Kdykoli se změní vlastnost count, Vue přepočítá vlastnost doubleCount.

Ve Vue 3 zavádí Composition API nový způsob definování vypočítaných vlastností pomocí výpočetní funkce. Vypadá to takto:

 <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>

Než budete moci funkci použít, musíte vypočítanou funkci importovat z balíčku vue.

Definovali jste vypočítaný ref doubleCount ve výše uvedeném bloku kódu pomocí vypočítané funkce. Vue 3 odkazuje na vypočítané vlastnosti jako na vypočítané reference, což zdůrazňuje jejich závislost na reaktivních proměnných.

Vypočítaná funkce bere jako argument getrovou funkci, která vypočítává odvozenou hodnotu na základě reaktivních dat. V tomto případě doubleCount vypočítaný ref vrátí násobení reaktivní proměnné count 2.

Všimněte si, že bloky kódu založené na Composition API jsou čitelnější a stručnější než bloky napsané pomocí objektu Options.

Naučte se vytvářet vlastní směrnice ve Vue

Vue 3 Composition API představuje výkonný a flexibilní přístup k organizaci a opětovnému použití kódu v komponentách Vue. Pomocí Composition API můžete vytvářet modulárnější a udržovatelnější aplikace Vue.

Vue také nabízí další funkce pro maximalizaci produktivity při vývoji webových aplikací. Můžete se naučit vytvářet vlastní direktivy pro opětovné použití určitých funkcí v různých částech vaší aplikace Vue.