Vue.js 3 Composition API: Süvaülevaade globaalsetele arendajatele

Vue.js on kiiresti saanud populaarseks valikuks moodsate veebirakenduste loomisel tänu oma lihtsasti omandatavale õppimiskõverale ja võimsatele funktsioonidele. Vue.js 3 viib selle veelgi kaugemale, tutvustades Composition API-d, mis on uus viis komponendi loogika organiseerimiseks. See süvaülevaade pakub põhjalikku juhendit Composition API mõistmiseks ja tõhusaks kasutamiseks, andes teile oskused luua paremini hooldatavaid, korduvkasutatavaid ja testitavaid Vue rakendusi.

Mis on Composition API?

Composition API on kogum API-sid, mis võimaldavad meil luua Vue komponente, kasutades imporditud funktsioone valikute deklareerimise asemel. Sisuliselt võimaldab see grupeerida seotud loogikat kokku, sõltumata sellest, kus see mallis ilmub. See on vastandiks Options API-le (data, methods, computed, watch), mis sunnib teid organiseerima koodi nende eelnevalt määratletud kategooriate alusel. Mõelge Options API-st kui koodi organiseerimisest selle järgi, *mis* see on (andmed, meetod jne), samas kui Composition API laseb teil organiseerida koodi selle järgi, *mida see teeb*.

Composition API tuum keerleb setup() funktsiooni ümber. See funktsioon on sisenemispunkt Composition API kasutamiseks komponendis. setup() funktsiooni sees saate defineerida reaktiivset olekut, arvutatud omadusi, meetodeid ja elutsükli konkse, kasutades komponeeritavaid funktsioone.

Miks kasutada Composition API-d?

Composition API pakub mitmeid eeliseid traditsioonilise Options API ees, eriti suuremate ja keerukamate rakenduste puhul:

• Parem koodi organiseerimine: Composition API võimaldab teil grupeerida seotud loogikat komponeeritavatesse funktsioonidesse, muutes teie koodi organiseeritumaks ja lihtsamini mõistetavaks. Selle asemel, et hajutada seotud koodi erinevate Options API omaduste vahel, saate hoida selle kõik koos ühes kohas. See on eriti kasulik keeruliste komponentide puhul, mis sisaldavad mitmeid funktsioone.
• Täiustatud korduvkasutatavus: Komponeeritavaid funktsioone saab kergesti eraldada ja taaskasutada mitmes komponendis. See soodustab koodi taaskasutamist ja vähendab dubleerimist, mis viib tõhusama arenduseni. See on mängumuutev lahendus ühtse kasutajakogemuse säilitamisel kogu rakenduses.
• Parem testitavus: Composition API hõlbustab ühiktestimist, võimaldades teil testida üksikuid komponeeritavaid funktsioone eraldi. See muudab vigade tuvastamise ja parandamise lihtsamaks, tulemuseks on vastupidavamad ja usaldusväärsemad rakendused.
• Tüübiohutus: TypeScriptiga kasutamisel pakub Composition API suurepärast tüübiohutust, püüdes kinni potentsiaalsed vead arenduse käigus. See võib oluliselt parandada teie koodibaasi üldist kvaliteeti ja hooldatavust.
• Loogika eraldamine ja taaskasutamine: Composition API muudab komponendi loogiliste osade eraldamise ja taaskasutamise lihtsaks. See on eriti kasulik selliste funktsioonide puhul nagu andmete pärimine, vormi valideerimine või kasutaja autentimise haldamine, mida on sageli vaja jagada mitme komponendi vahel.

Põhimõistete mõistmine

Sukeldume Composition API aluseks olevatesse põhimõistetesse:

1. setup()

Nagu varem mainitud, on setup() sisenemispunkt Composition API kasutamiseks. See on komponendi valik, mis käivitatakse enne komponendi loomist. setup() funktsiooni sees saate defineerida reaktiivset olekut, arvutatud omadusi, meetodeid ja elutsükli konkse ning seejärel tagastada objekti, mis sisaldab väärtusi, mida soovite mallile kättesaadavaks teha.

Näide:

import { ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
}

Selles näites kasutame ref-i, et luua reaktiivne muutuja nimega count. Samuti defineerime meetodi nimega increment, mis suurendab count-i väärtust. Lõpuks tagastame objekti, mis sisaldab count-i ja increment-i, mis muudab need komponendi mallis kättesaadavaks.

2. Reaktiivne olek ref ja reactive abil

Composition API pakub kahte põhilist funktsiooni reaktiivse oleku loomiseks: ref ja reactive.

• ref: ref võtab primitiivse väärtuse (number, string, boolean jne) ja tagastab reaktiivse ja muudetava ref-objekti. Väärtusele pääseb juurde ja seda muudetakse ref-i .value omaduse kaudu. Kasutage ref-i, kui soovite jälgida ühe väärtuse muutusi.
• reactive: reactive võtab objekti ja tagastab selle reaktiivse proxy. Reaktiivse objekti omaduste muutused käivitavad komponendi uuendused. Kasutage reactive-i, kui soovite jälgida mitme omaduse muutusi ühe objekti sees.

Näide ref-i kasutamisest:

import { ref } from 'vue'

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

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

    return {
      message,
      updateMessage
    }
  }
}

Näide reactive-i kasutamisest:

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. Arvutatud omadused computed abil

Arvutatud omadused on väärtused, mis tuletatakse teisest reaktiivsest olekust. Neid uuendatakse automaatselt, kui nende sõltuvused muutuvad. Funktsioon computed võtab argumendiks getteri funktsiooni ja tagastab ainult loetava reaktiivse ref-i.

Näide:

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

Selles näites on fullName arvutatud omadus, mis sõltub firstName-ist ja lastName-ist. Iga kord, kui firstName või lastName muutub, uuendatakse fullName automaatselt.

4. Jälgijad watch ja watchEffect abil

Jälgijad võimaldavad teil reageerida reaktiivse oleku muutustele. Composition API pakub kahte peamist viisi jälgijate loomiseks: watch ja watchEffect.

• watch: watch võimaldab teil selgesõnaliselt määrata, milliseid reaktiivseid sõltuvusi jälgida. See võtab esimese argumendina ühe või mitu reaktiivset viidet (ref-id, arvutatud omadused või reaktiivsed objektid) ja teise argumendina tagasikutsefunktsiooni. Tagasikutsefunktsioon käivitatakse alati, kui mõni määratud sõltuvustest muutub.
• watchEffect: watchEffect jälgib automaatselt kõiki reaktiivseid sõltuvusi, mida kasutatakse selle tagasikutsefunktsiooni sees. Tagasikutsefunktsioon käivitatakse esialgu ja seejärel uuesti, kui mõni jälgitavatest sõltuvustest muutub. See on kasulik, kui soovite teostada kõrvalmõjusid reaktiivse oleku muutuste põhjal ilma sõltuvusi selgesõnaliselt määramata. Olge watchEffect-iga siiski ettevaatlik, kuna see võib mõnikord põhjustada jõudlusprobleeme, kui see jälgib liiga palju sõltuvusi.

Näide watch-i kasutamisest:

import { ref, watch } from 'vue'

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Loendur muutus ${oldValue}-lt ${newValue}-le`)
      }
    )

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

    return {
      count,
      increment
    }
  }
}

Näide watchEffect-i kasutamisest:

import { ref, watchEffect } from 'vue'

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

    watchEffect(() => {
      console.log(`Sõnum on: ${message.value}`)
    })

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

    return {
      message,
      updateMessage
    }
  }
}

5. Elutsükli konksud

Composition API pakub juurdepääsu komponendi elutsükli konksudele funktsioonide kaudu, mis algavad on-ga, näiteks onMounted, onUpdated ja onUnmounted. Need funktsioonid võtavad argumendiks tagasikutse, mis käivitatakse, kui vastav elutsükli konks käivitub.

Näide:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Komponent on paigaldatud')
    })

    onUnmounted(() => {
      console.log('Komponent on eemaldatud')
    })

    return {}
  }
}

Komponeeritavate funktsioonide loomine

Composition API tegelik jõud tuleneb võimest luua korduvkasutatavaid komponeeritavaid funktsioone. Komponeeritav funktsioon on lihtsalt funktsioon, mis kapseldab tüki komponendi loogikast ning tagastab reaktiivse oleku ja funktsioonid, mida saab kasutada mitmes komponendis.

Näide: Loome komponeeritava funktsiooni, mis jälgib hiire asukohta:

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

Nüüd saate seda komponeeritavat funktsiooni kasutada igas komponendis:

import { useMousePosition } from './useMousePosition'

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

    return {
      x,
      y
    }
  }
}

Praktilised näited ja kasutusjuhud

Uurime mõningaid praktilisi näiteid, kuidas Composition API-d saab kasutada reaalsetes stsenaariumides:

1. Andmete pärimine

Komponeeritava funktsiooni loomine andmete pärimiseks API-st on levinud kasutusjuht. See võimaldab teil taaskasutada sama andmete pärimise loogikat mitmes komponendis.

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

Seejärel saate seda komponeeritavat funktsiooni oma komponentides kasutada nii:

import { useFetch } from './useFetch'

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

    return {
      data,
      error,
      loading
    }
  }
}

2. Vormi valideerimine

Vormi valideerimine on veel üks valdkond, kus Composition API võib olla väga abiks. Saate luua komponeeritavaid funktsioone, mis kapseldavad valideerimisloogikat ja taaskasutada neid erinevates vormides.

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 = 'See väli on kohustuslik'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Vigane e-posti formaat'
        break
      }
    }

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

  return {
    errors,
    validateField
  }
}

Kasutamine komponendis:

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. Kasutaja autentimise haldamine

Autentimisloogika võib sageli olla keeruline ja dubleeritud mitmes komponendis. Composition API võimaldab teil luua komponeeritava funktsiooni, mis kapseldab kogu autentimisloogika ja pakub teie komponentidele puhta API kasutamiseks.

Näide: (Lihtsustatud)

import { ref } from 'vue'

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

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

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

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Parimad praktikad Composition API kasutamiseks

Et Composition API-st maksimumi võtta, arvestage järgmiste parimate tavadega:

• Hoidke komponeeritavad funktsioonid fokusseerituna: Igal komponeeritaval funktsioonil peaks olema üks, hästi määratletud eesmärk. See muudab need lihtsamini mõistetavaks, taaskasutatavaks ja testitavaks.
• Kasutage kirjeldavaid nimesid: Valige nimed, mis näitavad selgelt komponeeritava funktsiooni eesmärki. See muudab teie koodi loetavamaks ja hooldatavamaks.
• Tagastage ainult see, mida vajate: Tagastage ainult see reaktiivne olek ja need funktsioonid, mida komponent tegelikult vajab. See aitab vähendada teie komponentide keerukust ja parandada jõudlust.
• Kaaluge TypeScripti kasutamist: TypeScript pakub suurepärast tüübiohutust ja aitab teil vigu arendusprotsessi varases staadiumis tabada. See on eriti kasulik Composition API-ga töötamisel.
• Dokumenteerige oma komponeeritavad funktsioonid: Lisage oma komponeeritavatele funktsioonidele kommentaare, et selgitada nende eesmärki, kuidas need töötavad ja millised on nende sõltuvused. See muudab teistel arendajatel (ja teie tulevasel minal) teie koodi mõistmise ja kasutamise lihtsamaks.
• Testige oma komponeeritavaid funktsioone: Kirjutage ühikteste, et tagada oma komponeeritavate funktsioonide korrektne toimimine. See aitab teil vigu varakult tabada ja parandada oma koodibaasi üldist kvaliteeti.
• Kasutage ühtset stiili: Kehtestage oma komponeeritavatele funktsioonidele ühtne stiil ja pidage sellest kinni. See muudab teie koodi loetavamaks ja hooldatavamaks.

Levinumad lõksud ja kuidas neid vältida

Kuigi Composition API pakub palju eeliseid, on ka mõningaid levinud lõkse, millest tuleks teadlik olla:

• Komponeeritavate funktsioonide liigne keerustamine: On lihtne end kaasa haarata ja luua liiga keerulisi komponeeritavaid funktsioone. Püüdke hoida need fokusseeritud ja lihtsad. Kui komponeeritav funktsioon muutub liiga suureks, kaaluge selle jaotamist väiksemateks, paremini hallatavateks osadeks.
• Juhuslikud reaktiivsusprobleemid: Veenduge, et mõistate, kuidas ref ja reactive töötavad, ning kasutate neid õigesti. Näiteks ref-i pesastatud omaduse otsene muutmine ilma seda lahti pakkimata võib põhjustada ootamatut käitumist.
• Elutsükli konksude vale kasutamine: Pöörake tähelepanu elutsükli konksude ajastusele ja veenduge, et kasutate neid asjakohaselt. Näiteks ärge proovige DOM-elementidele juurde pääseda onBeforeMount-is, kuna neid pole veel loodud.
• Jõudlusprobleemid watchEffect-iga: Olge teadlik watchEffect-i poolt jälgitavatest sõltuvustest. Kui see jälgib liiga palju sõltuvusi, võib see põhjustada jõudlusprobleeme. Kaaluge selle asemel watch-i kasutamist, et selgesõnaliselt määrata sõltuvused, mida soovite jälgida.
• Sündmuste kuulajate registreerimata jätmine: Kui kasutate sündmuste kuulajaid komponeeritavas funktsioonis, veenduge, et tühistate nende registreerimise onUnmounted konksus, et vältida mälulekkeid.

Composition API ja globaalsed meeskonnad

Composition API soodustab koostööd globaalsetes arendusmeeskondades, edendades:

• Standardiseeritud koodistruktuur: Rõhuasetus komponeeritavatele funktsioonidele pakub selget ja järjepidevat mustrit koodi organiseerimiseks, mis muudab erineva taustaga meeskonnaliikmetel koodibaasi mõistmise ja sellesse panustamise lihtsamaks.
• Modulaarne disain: Keerulise loogika jaotamine korduvkasutatavateks komponeeritavateks osadeks võimaldab modulaarsemat disaini, kus erinevad meeskonnaliikmed saavad töötada rakenduse iseseisvate osade kallal, segamata üksteise tööd.
• Parem koodi ülevaatus: Komponeeritavate funktsioonide fokusseeritud olemus lihtsustab koodi ülevaatust, kuna ülevaatajad saavad kergesti aru iga komponeeritava osa eesmärgist ja funktsionaalsusest.
• Teadmiste jagamine: Komponeeritavad funktsioonid toimivad iseseisvate teadmiste ühikutena, mida saab hõlpsasti jagada ja taaskasutada erinevate projektide ja meeskondade vahel.

Kokkuvõte

Vue.js 3 Composition API on võimas tööriist, mis võib oluliselt parandada teie Vue rakenduste organiseeritust, korduvkasutatavust ja testitavust. Mõistes põhimõisteid ja järgides selles süvaülevaates kirjeldatud parimaid tavasid, saate Composition API-d ära kasutada, et luua hooldatavamaid ja skaleeritavamaid rakendusi globaalsele publikule. Võtke Composition API omaks ja avage Vue.js 3 kogu potentsiaal.

Soovitame teil katsetada Composition API-d oma projektides ja avastada selle pakutavaid laialdasi võimalusi. Head kodeerimist!