Vue.js 3 Composition API: Detaljan pregled za globalne programere

Vue.js je brzo postao popularan izbor za izradu modernih web aplikacija, zahvaljujući svojoj pristupačnoj krivulji učenja i moćnim značajkama. Vue.js 3 ide korak dalje s uvođenjem Composition API-ja, novog načina organiziranja logike vaših komponenata. Ovaj detaljan pregled pruža sveobuhvatan vodič za razumijevanje i učinkovito korištenje Composition API-ja, opremajući vas vještinama za izradu održivijih, višekratno iskoristivih i testabilnih Vue aplikacija.

Što je Composition API?

Composition API je skup API-ja koji nam omogućuju pisanje Vue komponenata pomoću uvezenih funkcija umjesto deklariranja opcija. U suštini, omogućuje vam grupiranje povezane logike, bez obzira na to gdje se ona pojavljuje u predlošku. To je u suprotnosti s Options API-jem (data, methods, computed, watch), koji vas prisiljava da organizirate kod na temelju ovih unaprijed definiranih kategorija. Zamislite Options API kao organiziranje koda prema *onome što jest* (podatak, metoda, itd.), dok vam Composition API omogućuje organiziranje koda prema *onome što radi*.

Srž Composition API-ja vrti se oko funkcije setup(). Ova funkcija je ulazna točka za korištenje Composition API-ja unutar komponente. Unutar setup() funkcije možete definirati reaktivno stanje, izračunata svojstva, metode i životne cikluse (lifecycle hooks) koristeći kompozicijske funkcije.

Zašto koristiti Composition API?

Composition API nudi nekoliko prednosti u odnosu na tradicionalni Options API, posebno za veće i složenije aplikacije:

• Poboljšana organizacija koda: Composition API omogućuje grupiranje povezane logike u kompozicijske funkcije, čineći vaš kod organiziranijim i lakšim za razumijevanje. Umjesto rasipanja povezanog koda po različitim svojstvima Options API-ja, možete sve držati na jednom mjestu. Ovo je posebno korisno kod složenih komponenata koje uključuju više značajki.
• Poboljšana višekratna iskoristivost: Kompozicijske funkcije mogu se lako izdvojiti i ponovno koristiti u više komponenata. To promiče ponovnu upotrebu koda i smanjuje dupliciranje, što dovodi do učinkovitijeg razvoja. Ovo mijenja pravila igre za održavanje dosljednog korisničkog iskustva u vašoj aplikaciji.
• Bolja testabilnost: Composition API olakšava jedinično testiranje omogućujući vam da testirate pojedinačne kompozicijske funkcije izolirano. To olakšava identifikaciju i ispravljanje grešaka, što rezultira robusnijim i pouzdanijim aplikacijama.
• Tipska sigurnost: Kada se koristi s TypeScriptom, Composition API pruža izvrsnu tipsku sigurnost, hvatajući potencijalne greške tijekom razvoja. To može značajno poboljšati ukupnu kvalitetu i održivost vaše kodne baze.
• Logičko izdvajanje i ponovna uporaba: Composition API olakšava izdvajanje i ponovnu upotrebu logičkih dijelova vaše komponente. To je posebno korisno kod značajki poput dohvaćanja podataka, validacije obrazaca ili upravljanja autentifikacijom korisnika, koje se često moraju dijeliti između više komponenata.

Razumijevanje temeljnih koncepata

Zaronimo u ključne koncepte koji podupiru Composition API:

1. setup()

Kao što je ranije spomenuto, setup() je ulazna točka za korištenje Composition API-ja. To je opcija komponente koja se izvršava prije nego što je komponenta stvorena. Unutar setup() funkcije definirate reaktivno stanje, izračunata svojstva, metode i životne cikluse, a zatim vraćate objekt koji sadrži vrijednosti koje želite izložiti predlošku.

Primjer:

import { ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
}

U ovom primjeru koristimo ref za stvaranje reaktivne varijable nazvane count. Također definiramo metodu nazvanu increment koja povećava vrijednost count. Konačno, vraćamo objekt koji sadrži count i increment, što ih čini dostupnima u predlošku komponente.

2. Reaktivno stanje s ref i reactive

Composition API pruža dvije osnovne funkcije za stvaranje reaktivnog stanja: ref i reactive.

• ref: ref uzima primitivnu vrijednost (broj, string, boolean, itd.) i vraća reaktivni i promjenjivi ref objekt. Vrijednosti se pristupa i mijenja putem svojstva .value ref objekta. Koristite ref kada želite pratiti promjene jedne vrijednosti.
• reactive: reactive uzima objekt i vraća reaktivni proxy tog objekta. Promjene svojstava reaktivnog objekta pokrenut će ažuriranja u komponenti. Koristite reactive kada želite pratiti promjene više svojstava unutar objekta.

Primjer korištenja ref:

import { ref } from 'vue'

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

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

    return {
      message,
      updateMessage
    }
  }
}

Primjer korištenja reactive:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'John Doe',
      age: 30
    })

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

    return {
      state,
      updateName
    }
  }
}

3. Izračunata svojstva (Computed Properties) s computed

Izračunata svojstva su vrijednosti koje su izvedene iz drugog reaktivnog stanja. Automatski se ažuriraju kad god se njihove ovisnosti promijene. Funkcija computed uzima getter funkciju kao argument i vraća reaktivni ref samo za čitanje.

Primjer:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

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

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

U ovom primjeru, fullName je izračunato svojstvo koje ovisi o firstName i lastName. Kad god se firstName ili lastName promijeni, fullName će se automatski ažurirati.

4. Promatrači (Watchers) s watch i watchEffect

Promatrači vam omogućuju da reagirate na promjene u reaktivnom stanju. Composition API pruža dva glavna načina za stvaranje promatrača: watch i watchEffect.

• watch: watch vam omogućuje da eksplicitno navedete koje reaktivne ovisnosti želite promatrati. Kao prvi argument uzima jednu ili više reaktivnih referenci (ref-ove, izračunata svojstva ili reaktivne objekte), a kao drugi argument callback funkciju. Callback funkcija se izvršava kad god se bilo koja od navedenih ovisnosti promijeni.
• watchEffect: watchEffect automatski prati sve reaktivne ovisnosti korištene unutar svoje callback funkcije. Callback funkcija se izvršava u početku, a zatim se ponovno izvršava kad god se bilo koja od praćenih ovisnosti promijeni. Ovo je korisno kada želite izvršiti popratne efekte na temelju promjena reaktivnog stanja bez eksplicitnog navođenja ovisnosti. Međutim, budite oprezni s watchEffect jer ponekad može dovesti do problema s performansama ako prati previše ovisnosti.

Primjer korištenja watch:

import { ref, watch } from 'vue'

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Brojač se promijenio s ${oldValue} na ${newValue}`)
      }
    )

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

    return {
      count,
      increment
    }
  }
}

Primjer korištenja watchEffect:

import { ref, watchEffect } from 'vue'

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

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

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

    return {
      message,
      updateMessage
    }
  }
}

5. Životni ciklusi (Lifecycle Hooks)

Composition API pruža pristup životnim ciklusima komponente putem funkcija koje počinju s on, kao što su onMounted, onUpdated i onUnmounted. Te funkcije uzimaju callback kao argument, koji će se izvršiti kada se pokrene odgovarajući životni ciklus.

Primjer:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Komponenta je montirana')
    })

    onUnmounted(() => {
      console.log('Komponenta je demontirana')
    })

    return {}
  }
}

Kreiranje kompozicijskih funkcija

Prava snaga Composition API-ja dolazi iz mogućnosti stvaranja višekratno iskoristivih kompozicijskih funkcija. Kompozicijska funkcija je jednostavno funkcija koja enkapsulira dio logike komponente i vraća reaktivno stanje i funkcije koje se mogu koristiti u više komponenata.

Primjer: Stvorimo kompozicijsku funkciju koja prati položaj miša:

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

Sada možete koristiti ovu kompozicijsku funkciju u bilo kojoj komponenti:

import { useMousePosition } from './useMousePosition'

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

    return {
      x,
      y
    }
  }
}

Praktični primjeri i slučajevi upotrebe

Istražimo neke praktične primjere kako se Composition API može koristiti u stvarnim scenarijima:

1. Dohvaćanje podataka

Stvaranje kompozicijske funkcije za dohvaćanje podataka s API-ja čest je slučaj upotrebe. To vam omogućuje ponovnu upotrebu iste logike za dohvaćanje podataka u više komponenata.

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

Zatim možete koristiti ovu kompozicijsku funkciju u svojim komponentama ovako:

import { useFetch } from './useFetch'

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

    return {
      data,
      error,
      loading
    }
  }
}

2. Validacija obrazaca

Validacija obrazaca je još jedno područje gdje Composition API može biti vrlo koristan. Možete stvoriti kompozicijske funkcije koje enkapsuliraju logiku validacije i ponovno ih koristiti u različitim obrascima.

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 = 'Ovo polje je obavezno'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Nevažeći format e-pošte'
        break
      }
    }

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

  return {
    errors,
    validateField
  }
}

Upotreba u komponenti:

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. Upravljanje autentifikacijom korisnika

Logika autentifikacije često može biti složena i duplicirana u više komponenata. Composition API omogućuje vam stvaranje kompozicijske funkcije koja enkapsulira svu logiku autentifikacije i pruža čist API za korištenje u vašim komponentama.

Primjer: (Pojednostavljeno)

import { ref } from 'vue'

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

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

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

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Najbolje prakse za korištenje Composition API-ja

Da biste maksimalno iskoristili Composition API, razmotrite sljedeće najbolje prakse:

• Neka kompozicijske funkcije budu fokusirane: Svaka kompozicijska funkcija trebala bi imati jednu, dobro definiranu svrhu. To ih čini lakšim za razumijevanje, ponovnu upotrebu i testiranje.
• Koristite opisna imena: Odaberite imena koja jasno ukazuju na svrhu kompozicijske funkcije. To će vaš kod učiniti čitljivijim i održivijim.
• Vraćajte samo ono što trebate: Vraćajte samo reaktivno stanje i funkcije koje su komponenti doista potrebne. To pomaže smanjiti složenost vaših komponenata i poboljšati performanse.
• Razmislite o korištenju TypeScripta: TypeScript pruža izvrsnu tipsku sigurnost i može vam pomoći da rano uhvatite greške u procesu razvoja. Ovo je posebno korisno pri radu s Composition API-jem.
• Dokumentirajte svoje kompozicijske funkcije: Dodajte komentare svojim kompozicijskim funkcijama kako biste objasnili njihovu svrhu, kako rade i sve ovisnosti koje imaju. To će drugim programerima (i vašem budućem ja) olakšati razumijevanje i korištenje vašeg koda.
• Testirajte svoje kompozicijske funkcije: Napišite jedinične testove kako biste osigurali da vaše kompozicijske funkcije rade ispravno. To će vam pomoći da rano uhvatite greške i poboljšate ukupnu kvalitetu vaše kodne baze.
• Koristite dosljedan stil: Uspostavite dosljedan stil za svoje kompozicijske funkcije i držite ga se. To će vaš kod učiniti čitljivijim i održivijim.

Uobičajene zamke i kako ih izbjeći

Iako Composition API nudi mnoge prednosti, postoje i neke uobičajene zamke na koje treba paziti:

• Prekompliciranje kompozicijskih funkcija: Lako je zanijeti se i stvoriti previše složene kompozicijske funkcije. Pokušajte ih držati fokusiranima i jednostavnima. Ako kompozicijska funkcija postane prevelika, razmislite o njenom razbijanju na manje, upravljivije dijelove.
• Slučajni problemi s reaktivnošću: Pobrinite se da razumijete kako ref i reactive rade i koristite ih ispravno. Na primjer, izravno mijenjanje ugniježđenog svojstva ref objekta bez otpakiranja može dovesti do neočekivanog ponašanja.
• Neispravno korištenje životnih ciklusa: Pazite na vrijeme izvršavanja životnih ciklusa i osigurajte da ih koristite na odgovarajući način. Na primjer, ne pokušavajte pristupiti DOM elementima u onBeforeMount, jer još nisu stvoreni.
• Problemi s performansama s watchEffect: Budite svjesni ovisnosti koje prati watchEffect. Ako prati previše ovisnosti, to može dovesti do problema s performansama. Razmislite o korištenju watch kako biste eksplicitno naveli ovisnosti koje želite pratiti.
• Zaboravljanje odjave slušača događaja (event listeners): Kada koristite slušače događaja unutar kompozicijske funkcije, pobrinite se da ih odjavite u onUnmounted kuki kako biste spriječili curenje memorije.

Composition API i globalni timovi

Composition API potiče suradnju unutar globalnih razvojnih timova promicanjem:

• Standardizirane strukture koda: Naglasak na kompozicijskim funkcijama pruža jasan i dosljedan obrazac za organiziranje koda, što olakšava članovima tima iz različitih sredina da razumiju i doprinose kodnoj bazi.
• Modularnog dizajna: Razbijanje složene logike na višekratno iskoristive kompozicijske funkcije omogućuje modularniji dizajn, gdje različiti članovi tima mogu raditi na neovisnim dijelovima aplikacije bez ometanja tuđeg rada.
• Poboljšane revizije koda (Code Review): Fokusirana priroda kompozicijskih funkcija pojednostavljuje reviziju koda, jer recenzenti mogu lako razumjeti svrhu i funkcionalnost svake kompozicijske funkcije.
• Dijeljenja znanja: Kompozicijske funkcije djeluju kao samostalne jedinice znanja, koje se mogu lako dijeliti i ponovno koristiti u različitim projektima i timovima.

Zaključak

Vue.js 3 Composition API je moćan alat koji može značajno poboljšati organizaciju, višekratnu iskoristivost i testabilnost vaših Vue aplikacija. Razumijevanjem temeljnih koncepata i slijedeći najbolje prakse navedene u ovom detaljnom pregledu, možete iskoristiti Composition API za izradu održivijih i skalabilnijih aplikacija za globalnu publiku. Prihvatite Composition API i otključajte puni potencijal Vue.js 3.

Potičemo vas da eksperimentirate s Composition API-jem u vlastitim projektima i istražite ogromne mogućnosti koje nudi. Sretno kodiranje!