Vue: kompozice

61. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Opakování

Co dělá direktiva v-bind?
Co je to princip minimálního překvapení?
Jak vypadá životní cyklus Vue instance?
Co je to konstruktor?
Jak se zneguje selektor?

Opakování z minule

  • události — způsob komunikace mezi komponentami
  • zavolání — $emit(name, data)
  • zachycení — @name="fnc()"

Jaký problém má tento způsob předávání dat?

Kompozice

Kompozice

  • Composition API
  • nový styl tvoření komponent
  • odstranění možností (data, methods, ...)
  • vše se definuje jako jednoduchý lineární kód
  • znovupoužitelnost & rozšiřitelnost
  • původní systém (Options API) je stále k dispozici, používá však vnitřně kompozici

Použití

  • metoda setup
  • zkrácený zápis <script setup>

V dokumentaci Vue najdete všechny stránky přeložené do Composion API.

Dokumentace

Díky dobré rozšiřitelnosti komponent vznikl různé projekty s různými komponenty pro Composion API, jako je např. VueUse.

Blogovací platforma

Práce

Pomocí Vue 3 a Composition API vytvořte formulář pro přidávání blogových příspěvků a jejich zobrazení.

Jaký je rozdíl mezí ref a reactive v Composition API?

Rybáři

Práce

Options API zůstává ve Vue a neplánuje se odstraňovat.

Jaké jsou nevýhody systému Options API?

Často kombinujeme Composition API s Options API, proč?

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/