Vue.js 3 Composition API: Hĺbkový pohľad pre globálnych vývojárov

Vue.js sa rýchlo stalo obľúbenou voľbou pre tvorbu moderných webových aplikácií vďaka svojej prístupnej krivke učenia a výkonným funkciám. Vue.js 3 to posúva ešte ďalej zavedením Composition API, nového spôsobu organizácie logiky vašich komponentov. Tento hĺbkový pohľad poskytuje komplexného sprievodcu pre pochopenie a efektívne využívanie Composition API, čím vás vybaví zručnosťami na tvorbu udržiavateľnejších, opakovane použiteľných a testovateľných Vue aplikácií.

Čo je Composition API?

Composition API je sada API, ktorá nám umožňuje tvoriť Vue komponenty pomocou importovaných funkcií namiesto deklarovania možností. V podstate vám umožňuje zoskupiť súvisiacu logiku, bez ohľadu na to, kde sa objavuje v šablóne. To je v kontraste s Options API (data, methods, computed, watch), ktoré vás núti organizovať kód na základe týchto preddefinovaných kategórií. Predstavte si Options API ako organizovanie kódu podľa toho, *čo* to je (dáta, metóda atď.), zatiaľ čo Composition API vám umožňuje organizovať kód podľa toho, *čo robí*.

Jadrom Composition API je funkcia setup(). Táto funkcia je vstupným bodom pre využívanie Composition API v rámci komponentu. Vnútri setup() môžete definovať reaktívny stav, vypočítané vlastnosti, metódy a lifecycle hooks (háky životného cyklu) pomocou kompozitných funkcií (composable functions).

Prečo používať Composition API?

Composition API ponúka niekoľko výhod oproti tradičnému Options API, najmä pre väčšie a zložitejšie aplikácie:

• Zlepšená organizácia kódu: Composition API vám umožňuje zoskupiť súvisiacu logiku do kompozitných funkcií, vďaka čomu je váš kód organizovanejší a ľahšie pochopiteľný. Namiesto rozptyľovania súvisiaceho kódu po rôznych vlastnostiach Options API ho môžete mať všetok pohromade na jednom mieste. To je obzvlášť prínosné pri práci so zložitými komponentmi, ktoré zahŕňajú viacero funkcií.
• Vylepšená znovupoužiteľnosť: Kompozitné funkcie možno ľahko extrahovať a opakovane použiť vo viacerých komponentoch. To podporuje znovupoužitie kódu a znižuje duplicitu, čo vedie k efektívnejšiemu vývoju. Je to zásadná zmena pre udržanie konzistentného používateľského zážitku v celej aplikácii.
• Lepšia testovateľnosť: Composition API uľahčuje jednotkové testovanie tým, že vám umožňuje testovať jednotlivé kompozitné funkcie v izolácii. To uľahčuje identifikáciu a opravu chýb, čo vedie k robustnejším a spoľahlivejším aplikáciám.
• Typová bezpečnosť: Pri použití s TypeScriptom poskytuje Composition API vynikajúcu typovú bezpečnosť, čím odhaľuje potenciálne chyby už počas vývoja. To môže výrazne zlepšiť celkovú kvalitu a udržiavateľnosť vašej kódovej základne.
• Extrakcia a znovupoužitie logiky: Composition API uľahčuje extrahovanie a opätovné použitie logických častí vášho komponentu. To je obzvlášť užitočné pri práci s funkciami, ako je načítavanie dát, validácia formulárov alebo správa autentifikácie používateľa, ktoré je často potrebné zdieľať medzi viacerými komponentmi.

Pochopenie základných konceptov

Poďme sa ponoriť do kľúčových konceptov, ktoré tvoria základ Composition API:

1. setup()

Ako už bolo spomenuté, setup() je vstupným bodom pre používanie Composition API. Je to možnosť komponentu, ktorá sa vykoná pred vytvorením komponentu. Vnútri setup() definujete reaktívny stav, vypočítané vlastnosti, metódy a lifecycle hooks a potom vrátite objekt obsahujúci hodnoty, ktoré chcete sprístupniť šablóne.

Príklad:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

V tomto príklade používame ref na vytvorenie reaktívnej premennej s názvom count. Tiež definujeme metódu s názvom increment, ktorá zvyšuje hodnotu count. Nakoniec vraciame objekt obsahujúci count a increment, čo ich sprístupňuje v šablóne komponentu.

2. Reaktívny stav s ref a reactive

Composition API poskytuje dve základné funkcie na vytvorenie reaktívneho stavu: ref a reactive.

• ref: ref prijíma primitívnu hodnotu (číslo, reťazec, boolean atď.) a vracia reaktívny a meniteľný ref objekt. K hodnote sa pristupuje a modifikuje sa prostredníctvom vlastnosti .value ref objektu. Použite ref, keď chcete sledovať zmeny jedinej hodnoty.
• reactive: reactive prijíma objekt a vracia jeho reaktívne proxy. Zmeny vlastností reaktívneho objektu spustia aktualizácie v komponente. Použite reactive, keď chcete sledovať zmeny viacerých vlastností v rámci jedného objektu.

Príklad s použitím ref:

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Ahoj, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

Príklad s použitím reactive:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'Ján Vzorový',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

3. Vypočítané vlastnosti s computed

Vypočítané vlastnosti sú hodnoty, ktoré sú odvodené od iného reaktívneho stavu. Automaticky sa aktualizujú vždy, keď sa zmenia ich závislosti. Funkcia computed prijíma ako argument getter funkciu a vracia reaktívny ref iba na čítanie.

Príklad:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('Ján')
    const lastName = ref('Vzorový')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

V tomto príklade je fullName vypočítaná vlastnosť, ktorá závisí od firstName a lastName. Kedykoľvek sa zmení firstName alebo lastName, fullName sa automaticky aktualizuje.

4. Sledovače (watchers) s watch a watchEffect

Sledovače vám umožňujú reagovať na zmeny v reaktívnom stave. Composition API poskytuje dva hlavné spôsoby vytvárania sledovačov: watch a watchEffect.

• watch: watch vám umožňuje explicitne špecifikovať, ktoré reaktívne závislosti sledovať. Ako prvý argument prijíma jednu alebo viac reaktívnych referencií (refy, vypočítané vlastnosti alebo reaktívne objekty) a ako druhý argument callback funkciu. Callback funkcia sa vykoná vždy, keď sa zmení niektorá zo špecifikovaných závislostí.
• watchEffect: watchEffect automaticky sleduje všetky reaktívne závislosti použité vo vnútri svojej callback funkcie. Callback funkcia sa vykoná na začiatku a potom sa znova vykoná vždy, keď sa zmení niektorá zo sledovaných závislostí. Je to užitočné, keď chcete vykonávať vedľajšie efekty na základe zmien reaktívneho stavu bez explicitného špecifikovania závislostí. Buďte však opatrní s watchEffect, pretože niekedy môže viesť k problémom s výkonom, ak sleduje príliš veľa závislostí.

Príklad s použitím watch:

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Počet sa zmenil z ${oldValue} na ${newValue}`)
      }
    )

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

Príklad s použitím watchEffect:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Ahoj')

    watchEffect(() => {
      console.log(`Správa je: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

5. Lifecycle Hooks (háky životného cyklu)

Composition API poskytuje prístup k hákom životného cyklu komponentu prostredníctvom funkcií, ktoré začínajú na on, ako napríklad onMounted, onUpdated a onUnmounted. Tieto funkcie prijímajú ako argument callback, ktorý sa vykoná, keď sa spustí príslušný hák životného cyklu.

Príklad:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Komponent je pripojený (mounted)')
    })

    onUnmounted(() => {
      console.log('Komponent je odpojený (unmounted)')
    })

    return {}
  }
}

Vytváranie kompozitných funkcií (Composable Functions)

Skutočná sila Composition API spočíva v schopnosti vytvárať opakovane použiteľné kompozitné funkcie. Kompozitná funkcia je jednoducho funkcia, ktorá zapuzdruje časť logiky komponentu a vracia reaktívny stav a funkcie, ktoré možno použiť vo viacerých komponentoch.

Príklad: Vytvorme kompozitnú funkciu, ktorá sleduje polohu myši:

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

Teraz môžete túto kompozitnú funkciu použiť v akomkoľvek komponente:

import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
}

Praktické príklady a prípady použitia

Pozrime sa na niekoľko praktických príkladov, ako možno Composition API použiť v reálnych scenároch:

1. Získavanie dát (Data Fetching)

Vytvorenie kompozitnej funkcie na získavanie dát z API je bežným prípadom použitia. To vám umožňuje opakovane použiť rovnakú logiku na získavanie dát vo viacerých komponentoch.

import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

Túto kompozitnú funkciu potom môžete použiť vo svojich komponentoch takto:

import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

2. Validácia formulárov

Validácia formulárov je ďalšou oblasťou, kde môže byť Composition API veľmi nápomocné. Môžete vytvárať kompozitné funkcie, ktoré zapuzdrujú logiku validácie a opakovane ich používať v rôznych formulároch.

import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'Toto pole je povinné'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Neplatný formát e-mailu'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

Použitie v komponente:

import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

3. Správa autentifikácie používateľa

Logika autentifikácie môže byť často zložitá a duplikovaná vo viacerých komponentoch. Composition API vám umožňuje vytvoriť kompozitnú funkciu, ktorá zapuzdruje všetku logiku autentifikácie a poskytuje čisté API pre vaše komponenty.

Príklad: (Zjednodušený)

import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // Simulácia volania API
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // Simulácia volania API
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Osvedčené postupy pre používanie Composition API

Ak chcete z Composition API vyťažiť maximum, zvážte nasledujúce osvedčené postupy:

• Udržujte kompozitné funkcie zamerané: Každá kompozitná funkcia by mala mať jeden, dobre definovaný účel. To ich robí ľahšie pochopiteľnými, opakovane použiteľnými a testovateľnými.
• Používajte popisné názvy: Vyberajte názvy, ktoré jasne naznačujú účel kompozitnej funkcie. Váš kód tak bude čitateľnejší a udržiavateľnejší.
• Vracajte len to, čo potrebujete: Vracajte len reaktívny stav a funkcie, ktoré komponent skutočne potrebuje. To pomáha znižovať zložitosť vašich komponentov a zlepšovať výkon.
• Zvážte použitie TypeScriptu: TypeScript poskytuje vynikajúcu typovú bezpečnosť a môže vám pomôcť odhaliť chyby včas v procese vývoja. To je obzvlášť prínosné pri práci s Composition API.
• Dokumentujte svoje kompozitné funkcie: Pridávajte komentáre do svojich kompozitných funkcií, aby ste vysvetlili ich účel, ako fungujú a akékoľvek závislosti, ktoré majú. Uľahčí to ostatným vývojárom (a vášmu budúcemu ja) pochopiť a používať váš kód.
• Testujte svoje kompozitné funkcie: Píšte jednotkové testy, aby ste sa uistili, že vaše kompozitné funkcie fungujú správne. To vám pomôže odhaliť chyby včas a zlepšiť celkovú kvalitu vašej kódovej základne.
• Používajte konzistentný štýl: Stanovte si konzistentný štýl pre svoje kompozitné funkcie a držte sa ho. Váš kód tak bude čitateľnejší a udržiavateľnejší.

Bežné nástrahy a ako sa im vyhnúť

Hoci Composition API ponúka mnoho výhod, existujú aj niektoré bežné nástrahy, na ktoré si treba dať pozor:

• Prílišné komplikovanie kompozitných funkcií: Je ľahké sa nechať uniesť a vytvárať príliš zložité kompozitné funkcie. Snažte sa ich udržiavať zamerané a jednoduché. Ak sa kompozitná funkcia stane príliš veľkou, zvážte jej rozdelenie na menšie, lepšie spravovateľné časti.
• Neúmyselné problémy s reaktivitou: Uistite sa, že rozumiete, ako fungujú ref a reactive, a používajte ich správne. Napríklad priama modifikácia vnorenej vlastnosti ref bez jej rozbalenia môže viesť k neočakávanému správaniu.
• Nesprávne používanie lifecycle hooks: Dávajte pozor na načasovanie lifecycle hooks a uistite sa, že ich používate vhodne. Napríklad sa nepokúšajte pristupovať k DOM elementom v onBeforeMount, pretože ešte neboli vytvorené.
• Problémy s výkonom pri watchEffect: Dávajte pozor na závislosti sledované funkciou watchEffect. Ak sleduje príliš veľa závislostí, môže to viesť k problémom s výkonom. Zvážte namiesto toho použitie watch, aby ste explicitne špecifikovali závislosti, ktoré chcete sledovať.
• Zabúdanie na odregistrovanie event listenerov: Pri používaní event listenerov v rámci kompozitnej funkcie sa uistite, že ich odregistrujete v háku onUnmounted, aby ste predišli únikom pamäte.

Composition API a globálne tímy

Composition API podporuje spoluprácu v rámci globálnych vývojárskych tímov tým, že podporuje:

• Štandardizovaná štruktúra kódu: Dôraz na kompozitné funkcie poskytuje jasný a konzistentný vzor pre organizáciu kódu, čo uľahčuje členom tímu z rôznych prostredí pochopiť a prispievať do kódovej základne.
• Modulárny dizajn: Rozdelenie zložitej logiky na opakovane použiteľné kompozitné funkcie umožňuje modulárnejší dizajn, kde môžu rôzni členovia tímu pracovať na nezávislých častiach aplikácie bez toho, aby si navzájom zasahovali do práce.
• Zlepšené code review: Zameraná povaha kompozitných funkcií zjednodušuje revíziu kódu (code review), pretože recenzenti môžu ľahko pochopiť účel a funkčnosť každej kompozitnej funkcie.
• Zdieľanie vedomostí: Kompozitné funkcie fungujú ako samostatné jednotky vedomostí, ktoré možno ľahko zdieľať a opakovane používať v rôznych projektoch a tímoch.

Záver

Vue.js 3 Composition API je výkonný nástroj, ktorý môže výrazne zlepšiť organizáciu, znovupoužiteľnosť a testovateľnosť vašich Vue aplikácií. Porozumením základných konceptov a dodržiavaním osvedčených postupov uvedených v tomto hĺbkovom pohľade môžete využiť Composition API na tvorbu udržiavateľnejších a škálovateľnejších aplikácií pre globálne publikum. Osvojte si Composition API a odomknite plný potenciál Vue.js 3.

Odporúčame vám experimentovať s Composition API vo vašich vlastných projektoch a objavovať obrovské možnosti, ktoré ponúka. Šťastné kódovanie!