Vue.js 3 Composition API: Išsami analizė pasaulio programuotojams

Vue.js sparčiai tapo populiariu pasirinkimu kuriant modernias žiniatinklio aplikacijas dėl savo prieinamos mokymosi kreivės ir galingų funkcijų. Vue.js 3 žengia dar toliau, pristatydamas Composition API – naują būdą organizuoti jūsų komponentų logiką. Ši išsami analizė pateikia visapusišką vadovą, kaip efektyviai suprasti ir naudoti Composition API, suteikdama jums įgūdžių kurti lengviau prižiūrimas, daugkartinio naudojimo ir testuojamas Vue aplikacijas.

Kas yra Composition API?

Composition API – tai API rinkinys, leidžiantis mums kurti Vue komponentus naudojant importuotas funkcijas, o ne deklaruojant parinktis. Iš esmės, tai leidžia sugrupuoti susijusią logiką kartu, nepriklausomai nuo to, kur ji atsiranda šablone. Tai skiriasi nuo Options API (data, methods, computed, watch), kuris verčia organizuoti kodą pagal šias iš anksto nustatytas kategorijas. Pagalvokite apie Options API kaip apie kodo organizavimą pagal tai, *kas* tai yra (duomenys, metodas ir t. t.), o Composition API leidžia organizuoti kodą pagal tai, *ką jis daro*.

Composition API esmė sukasi aplink setup() funkciją. Ši funkcija yra įėjimo taškas, norint naudoti Composition API komponente. setup() viduje galite apibrėžti reaktyvią būseną, apskaičiuojamas savybes, metodus ir gyvavimo ciklo kabliukus (lifecycle hooks) naudojant komponuojamas funkcijas.

Kodėl verta naudoti Composition API?

Composition API siūlo keletą pranašumų, palyginti su tradiciniu Options API, ypač didesnėms ir sudėtingesnėms aplikacijoms:

• Patobulinta kodo organizacija: Composition API leidžia grupuoti susijusią logiką į komponuojamas funkcijas, todėl jūsų kodas tampa labiau organizuotas ir lengviau suprantamas. Užuot išbarstę susijusį kodą po skirtingas Options API savybes, galite viską laikyti vienoje vietoje. Tai ypač naudinga dirbant su sudėtingais komponentais, kurie apima kelias funkcijas.
• Pagerintas daugkartinis naudojimas: Komponuojamas funkcijas galima lengvai išskirti ir pakartotinai naudoti keliuose komponentuose. Tai skatina kodo pakartotinį naudojimą ir mažina dubliavimąsi, todėl programavimas tampa efektyvesnis. Tai yra esminis pokytis siekiant išlaikyti nuoseklią vartotojo patirtį visoje jūsų aplikacijoje.
• Geresnis testuojamumas: Composition API palengvina vienetų testavimą (unit testing), leisdama testuoti atskiras komponuojamas funkcijas izoliuotai. Tai palengvina klaidų identifikavimą ir taisymą, todėl aplikacijos tampa patikimesnės.
• Tipų saugumas: Naudojant kartu su TypeScript, Composition API suteikia puikų tipų saugumą, leidžiantį pagauti galimas klaidas programavimo etape. Tai gali žymiai pagerinti bendrą jūsų kodo bazės kokybę ir palaikomumą.
• Logikos išskyrimas ir pakartotinis naudojimas: Composition API leidžia paprastai išskirti ir pakartotinai naudoti logines jūsų komponento dalis. Tai ypač naudinga dirbant su tokiomis funkcijomis kaip duomenų gavimas, formų patvirtinimas ar vartotojo autentifikavimo valdymas, kurias dažnai reikia bendrinti keliuose komponentuose.

Pagrindinių koncepcijų supratimas

Pasigilinkime į pagrindines koncepcijas, kuriomis grindžiamas Composition API:

1. setup()

Kaip minėta anksčiau, setup() yra įėjimo taškas naudojant Composition API. Tai komponento parinktis, kuri vykdoma prieš sukuriant komponentą. setup() viduje jūs apibrėžiate reaktyvią būseną, apskaičiuojamas savybes, metodus ir gyvavimo ciklo kabliukus, o tada grąžinate objektą su reikšmėmis, kurias norite atvaizduoti šablone.

Pavyzdys:

import { ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
}

Šiame pavyzdyje mes naudojame ref, kad sukurtume reaktyvų kintamąjį, pavadintą count. Taip pat apibrėžiame metodą pavadinimu increment, kuris padidina count reikšmę. Galiausiai, grąžiname objektą, kuriame yra count ir increment, todėl jie tampa prieinami komponento šablone.

2. Reaktyvi būsena su ref ir reactive

Composition API suteikia dvi pagrindines funkcijas reaktyviai būsenai kurti: ref ir reactive.

• ref: ref priima primityvią reikšmę (skaičių, eilutę, loginę reikšmę ir t. t.) ir grąžina reaktyvų bei keičiamą ref objektą. Reikšmė pasiekiama ir modifikuojama per ref .value savybę. Naudokite ref, kai norite sekti vienos reikšmės pokyčius.
• reactive: reactive priima objektą ir grąžina reaktyvų to objekto tarpinį variantą (proxy). Reaktyvaus objekto savybių pakeitimai sukels atnaujinimus komponente. Naudokite reactive, kai norite sekti kelių savybių pokyčius objekte.

Pavyzdys naudojant ref:

import { ref } from 'vue'

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

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

    return {
      message,
      updateMessage
    }
  }
}

Pavyzdys naudojant 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. Apskaičiuojamos savybės su computed

Apskaičiuojamos savybės yra reikšmės, kurios yra išvestos iš kitos reaktyvios būsenos. Jos automatiškai atnaujinamos, kai pasikeičia jų priklausomybės. Funkcija computed kaip argumentą priima geterio funkciją ir grąžina tik skaitomą reaktyvų ref.

Pavyzdys:

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

Šiame pavyzdyje fullName yra apskaičiuojama savybė, kuri priklauso nuo firstName ir lastName. Kai pasikeičia firstName arba lastName, fullName bus automatiškai atnaujinta.

4. Stebėtojai su watch ir watchEffect

Stebėtojai (watchers) leidžia reaguoti į reaktyvios būsenos pokyčius. Composition API suteikia du pagrindinius būdus stebėtojams kurti: watch ir watchEffect.

• watch: watch leidžia aiškiai nurodyti, kurias reaktyvias priklausomybes stebėti. Ji priima vieną ar kelias reaktyvias nuorodas (refs, apskaičiuojamas savybes ar reaktyvius objektus) kaip pirmąjį argumentą ir atgalinio ryšio (callback) funkciją kaip antrąjį argumentą. Atgalinio ryšio funkcija vykdoma, kai pasikeičia bet kuri iš nurodytų priklausomybių.
• watchEffect: watchEffect automatiškai seka visas reaktyvias priklausomybes, naudojamas jos atgalinio ryšio funkcijoje. Atgalinio ryšio funkcija vykdoma iš pradžių ir tada pakartotinai, kai pasikeičia bet kuri iš sekamų priklausomybių. Tai naudinga, kai norite atlikti šalutinius poveikius, pagrįstus reaktyvios būsenos pokyčiais, aiškiai nenurodant priklausomybių. Tačiau būkite atsargūs su watchEffect, nes kartais tai gali sukelti našumo problemų, jei ji seka per daug priklausomybių.

Pavyzdys naudojant watch:

import { ref, watch } from 'vue'

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Skaitliukas pasikeitė nuo ${oldValue} iki ${newValue}`)
      }
    )

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

    return {
      count,
      increment
    }
  }
}

Pavyzdys naudojant watchEffect:

import { ref, watchEffect } from 'vue'

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

    watchEffect(() => {
      console.log(`Pranešimas yra: ${message.value}`)
    })

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

    return {
      message,
      updateMessage
    }
  }
}

5. Gyvavimo ciklo kabliukai

Composition API suteikia prieigą prie komponento gyvavimo ciklo kabliukų (lifecycle hooks) per funkcijas, kurios prasideda on, pavyzdžiui, onMounted, onUpdated ir onUnmounted. Šios funkcijos kaip argumentą priima atgalinio ryšio funkciją, kuri bus įvykdyta, kai suveiks atitinkamas gyvavimo ciklo kabliukas.

Pavyzdys:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Komponentas primontuotas (mounted)')
    })

    onUnmounted(() => {
      console.log('Komponentas atjungtas (unmounted)')
    })

    return {}
  }
}

Komponuojamų funkcijų kūrimas

Tikroji Composition API galia atsiskleidžia per galimybę kurti daugkartinio naudojimo komponuojamas funkcijas. Komponuojama funkcija yra tiesiog funkcija, kuri apgaubia dalį komponento logikos ir grąžina reaktyvią būseną bei funkcijas, kurias galima naudoti keliuose komponentuose.

Pavyzdys: Sukurkime komponuojamą funkciją, kuri seka pelės poziciją:

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

Dabar galite naudoti šią komponuojamą funkciją bet kuriame komponente:

import { useMousePosition } from './useMousePosition'

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

    return {
      x,
      y
    }
  }
}

Praktiniai pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą praktinių pavyzdžių, kaip Composition API gali būti naudojamas realiose situacijose:

1. Duomenų gavimas

Komponuojamos funkcijos kūrimas duomenims iš API gauti yra įprastas naudojimo atvejis. Tai leidžia jums pakartotinai naudoti tą pačią duomenų gavimo logiką keliuose komponentuose.

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

Tada galite naudoti šią komponuojamą funkciją savo komponentuose taip:

import { useFetch } from './useFetch'

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

    return {
      data,
      error,
      loading
    }
  }
}

2. Formos patvirtinimas

Formos patvirtinimas yra dar viena sritis, kur Composition API gali būti labai naudinga. Galite sukurti komponuojamas funkcijas, kurios apima patvirtinimo logiką ir pakartotinai jas naudoti skirtingose formose.

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 = 'Šis laukas yra privalomas'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Neteisingas el. pašto formatas'
        break
      }
    }

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

  return {
    errors,
    validateField
  }
}

Naudojimas 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. Vartotojo autentifikavimo valdymas

Autentifikavimo logika dažnai gali būti sudėtinga ir dubliuojama keliuose komponentuose. Composition API leidžia sukurti komponuojamą funkciją, kuri apima visą autentifikavimo logiką ir suteikia švarų API jūsų komponentams naudoti.

Pavyzdys: (supaprastintas)

import { ref } from 'vue'

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

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

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

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Geriausios praktikos naudojant Composition API

Norėdami maksimaliai išnaudoti Composition API, apsvarstykite šias geriausias praktikas:

• Išlaikykite komponuojamas funkcijas fokusuotas: Kiekviena komponuojama funkcija turėtų turėti vieną, aiškiai apibrėžtą tikslą. Tai daro jas lengviau suprantamas, pakartotinai naudojamas ir testuojamas.
• Naudokite aprašomuosius pavadinimus: Pasirinkite pavadinimus, kurie aiškiai nurodo komponuojamos funkcijos tikslą. Tai padarys jūsų kodą skaitomesnį ir lengviau prižiūrimą.
• Grąžinkite tik tai, ko reikia: Grąžinkite tik tą reaktyvią būseną ir funkcijas, kurios iš tikrųjų reikalingos komponentui. Tai padeda sumažinti jūsų komponentų sudėtingumą ir pagerinti našumą.
• Apsvarstykite galimybę naudoti TypeScript: TypeScript suteikia puikų tipų saugumą ir gali padėti jums sugauti klaidas ankstyvame kūrimo procese. Tai ypač naudinga dirbant su Composition API.
• Dokumentuokite savo komponuojamas funkcijas: Pridėkite komentarus prie savo komponuojamų funkcijų, kad paaiškintumėte jų tikslą, kaip jos veikia ir kokias priklausomybes jos turi. Tai palengvins kitiems programuotojams (ir jūsų būsimam „aš“) suprasti ir naudoti jūsų kodą.
• Testuokite savo komponuojamas funkcijas: Rašykite vienetų testus, kad užtikrintumėte, jog jūsų komponuojamos funkcijos veikia teisingai. Tai padės jums anksti sugauti klaidas ir pagerinti bendrą jūsų kodo bazės kokybę.
• Naudokite nuoseklų stilių: Nustatykite nuoseklų stilių savo komponuojamoms funkcijoms ir jo laikykitės. Tai padarys jūsų kodą skaitomesnį ir lengviau prižiūrimą.

Dažniausios klaidos ir kaip jų išvengti

Nors Composition API siūlo daug privalumų, yra ir keletas dažnų klaidų, kurių reikėtų saugotis:

• Perdėtas komponuojamų funkcijų sudėtingumas: Lengva persistengti ir sukurti per daug sudėtingas komponuojamas funkcijas. Stenkitės, kad jos būtų fokusuotos ir paprastos. Jei komponuojama funkcija tampa per didelė, apsvarstykite galimybę ją suskaidyti į mažesnes, lengviau valdomas dalis.
• Netyčinės reaktyvumo problemos: Įsitikinkite, kad suprantate, kaip veikia ref ir reactive, ir teisingai juos naudojate. Pavyzdžiui, tiesioginis įdėtos ref savybės modifikavimas be jos išskleidimo gali sukelti netikėtą elgesį.
• Neteisingas gyvavimo ciklo kabliukų naudojimas: Atkreipkite dėmesį į gyvavimo ciklo kabliukų vykdymo laiką ir užtikrinkite, kad juos naudojate tinkamai. Pavyzdžiui, nebandykite pasiekti DOM elementų onBeforeMount, nes jie dar nebus sukurti.
• Našumo problemos su watchEffect: Būkite atidūs dėl priklausomybių, kurias seka watchEffect. Jei ji seka per daug priklausomybių, tai gali sukelti našumo problemų. Apsvarstykite galimybę naudoti watch, kad aiškiai nurodytumėte priklausomybes, kurias norite stebėti.
• Pamiršimas atšaukti įvykių klausytojus: Naudodami įvykių klausytojus (event listeners) komponuojamoje funkcijoje, įsitikinkite, kad juos atšaukiate onUnmounted kabliuke, kad išvengtumėte atminties nutekėjimo.

Composition API ir globalios komandos

Composition API skatina bendradarbiavimą globaliose programuotojų komandose, skatindamas:

• Standartizuotą kodo struktūrą: Dėmesys komponuojamoms funkcijoms suteikia aiškų ir nuoseklų kodo organizavimo modelį, todėl komandos nariams iš įvairių aplinkų lengviau suprasti kodą ir prie jo prisidėti.
• Modulinį dizainą: Sudėtingos logikos suskaidymas į daugkartinio naudojimo komponuojamas funkcijas leidžia sukurti modulinį dizainą, kuriame skirtingi komandos nariai gali dirbti su nepriklausomomis aplikacijos dalimis, netrukdydami vieni kitiems.
• Pagerintą kodo peržiūrą: Fokusuota komponuojamų funkcijų prigimtis supaprastina kodo peržiūrą (code review), nes peržiūrintieji gali lengvai suprasti kiekvienos komponuojamos funkcijos tikslą ir funkcionalumą.
• Žinių dalijimąsi: Komponuojamos funkcijos veikia kaip savarankiški žinių vienetai, kuriais galima lengvai dalytis ir pakartotinai naudoti skirtinguose projektuose ir komandose.

Išvada

Vue.js 3 Composition API yra galingas įrankis, kuris gali žymiai pagerinti jūsų Vue aplikacijų organizavimą, pakartotinį naudojimą ir testuojamumą. Suprasdami pagrindines koncepcijas ir laikydamiesi šiame išsamiame vadove aprašytų geriausių praktikų, galite išnaudoti Composition API, kad sukurtumėte lengviau prižiūrimas ir mastelį atitinkančias aplikacijas pasaulinei auditorijai. Priimkite Composition API ir atskleiskite visą Vue.js 3 potencialą.

Raginame jus eksperimentuoti su Composition API savo projektuose ir tyrinėti didžiules jo teikiamas galimybes. Sėkmingo programavimo!