Vue.js 3 Composition API: Padziļināts apskats globāliem izstrādātājiem

Vue.js ir strauji kļuvis par populāru izvēli modernu tīmekļa lietotņu veidošanai, pateicoties tā pieejamajai mācīšanās līknei un jaudīgajām funkcijām. Vue.js 3 to paceļ jaunā līmenī, ieviešot Composition API — jaunu veidu, kā organizēt komponentu loģiku. Šis padziļinātais apskats sniedz visaptverošu ceļvedi, lai izprastu un efektīvi izmantotu Composition API, nodrošinot jūs ar prasmēm veidot uzturamākas, atkārtoti lietojamas un testējamas Vue lietotnes.

Kas ir Composition API?

Composition API ir API kopums, kas ļauj mums veidot Vue komponentus, izmantojot importētas funkcijas, nevis deklarējot opcijas. Būtībā tas ļauj grupēt saistīto loģiku kopā, neatkarīgi no tā, kur tā parādās veidnē. Tas ir pretstatā Options API (data, methods, computed, watch), kas liek jums organizēt kodu, pamatojoties uz šīm iepriekš definētajām kategorijām. Domājiet par Options API kā par koda organizēšanu pēc tā, *kas tas ir* (dati, metode utt.), savukārt Composition API ļauj organizēt kodu pēc tā, *ko tas dara*.

Composition API pamatā ir setup() funkcija. Šī funkcija ir ieejas punkts Composition API izmantošanai komponentā. Funkcijas setup() ietvaros jūs varat definēt reaktīvo stāvokli, aprēķinātās īpašības, metodes un dzīves cikla "āķus", izmantojot komponējamās funkcijas.

Kāpēc izmantot Composition API?

Composition API piedāvā vairākas priekšrocības salīdzinājumā ar tradicionālo Options API, īpaši lielākām un sarežģītākām lietotnēm:

• Uzlabota koda organizācija: Composition API ļauj grupēt saistīto loģiku komponējamās funkcijās, padarot jūsu kodu organizētāku un vieglāk saprotamu. Tā vietā, lai izkaisītu saistīto kodu pa dažādām Options API īpašībām, jūs varat to visu turēt vienuviet. Tas ir īpaši noderīgi, strādājot ar sarežģītiem komponentiem, kas ietver vairākas funkcijas.
• Uzlabota atkārtota lietojamība: Komponējamās funkcijas var viegli izvilkt un atkārtoti izmantot vairākos komponentos. Tas veicina koda atkārtotu izmantošanu un samazina dublēšanos, kas noved pie efektīvākas izstrādes. Tas ir revolucionārs risinājums, lai uzturētu konsekventu lietotāja pieredzi visā jūsu lietotnē.
• Labāka testējamība: Composition API atvieglo vienību testēšanu, ļaujot jums testēt atsevišķas komponējamās funkcijas izolēti. Tas atvieglo kļūdu identificēšanu un labošanu, radot robustākas un uzticamākas lietotnes.
• Tipu drošība: Lietojot kopā ar TypeScript, Composition API nodrošina lielisku tipu drošību, atklājot potenciālās kļūdas izstrādes laikā. Tas var ievērojami uzlabot jūsu koda bāzes kopējo kvalitāti un uzturamību.
• Loģikas ekstrakcija un atkārtota izmantošana: Composition API padara vienkāršu loģisko daļu izvilkšanu no komponenta un to atkārtotu izmantošanu. Tas ir īpaši noderīgi, strādājot ar tādām funkcijām kā datu ielāde, formas validācija vai lietotāju autentifikācijas pārvaldība, kuras bieži ir jāizmanto vairākos komponentos.

Pamatkoncepciju izpratne

Iedziļināsimies galvenajās koncepcijās, kas ir Composition API pamatā:

1. setup()

Kā minēts iepriekš, setup() ir ieejas punkts Composition API izmantošanai. Tā ir komponenta opcija, kas tiek izpildīta pirms komponenta izveides. Funkcijas setup() ietvaros jūs definējat reaktīvo stāvokli, aprēķinātās īpašības, metodes un dzīves cikla "āķus", un pēc tam atgriežat objektu, kas satur vērtības, kuras vēlaties padarīt pieejamas veidnei.

Piemērs:

import { ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
}

Šajā piemērā mēs izmantojam ref, lai izveidotu reaktīvu mainīgo ar nosaukumu count. Mēs arī definējam metodi ar nosaukumu increment, kas palielina count vērtību. Visbeidzot, mēs atgriežam objektu, kas satur count un increment, kas padara tos pieejamus komponenta veidnē.

2. Reaktīvais stāvoklis ar ref un reactive

Composition API nodrošina divas galvenās funkcijas reaktīvā stāvokļa izveidei: ref un reactive.

• ref: ref pieņem primitīvu vērtību (skaitli, virkni, Būla vērtību utt.) un atgriež reaktīvu un maināmu ref objektu. Vērtībai piekļūst un to modificē, izmantojot ref .value īpašību. Izmantojiet ref, ja vēlaties sekot līdzi izmaiņām vienai vērtībai.
• reactive: reactive pieņem objektu un atgriež šī objekta reaktīvu starpniekserveri (proxy). Izmaiņas reaktīvā objekta īpašībās izraisīs atjauninājumus komponentā. Izmantojiet reactive, ja vēlaties sekot līdzi izmaiņām vairākām īpašībām objektā.

Piemērs, izmantojot ref:

import { ref } from 'vue'

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

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

    return {
      message,
      updateMessage
    }
  }
}

Piemērs, izmantojot reactive:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'Jānis Bērziņš',
      age: 30
    })

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

    return {
      state,
      updateName
    }
  }
}

3. Aprēķinātās īpašības ar computed

Aprēķinātās īpašības ir vērtības, kas tiek atvasinātas no cita reaktīvā stāvokļa. Tās tiek automātiski atjauninātas, kad mainās to atkarības. Funkcija computed kā argumentu pieņem gettera funkciju un atgriež tikai lasāmu reaktīvu ref.

Piemērs:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('Jānis')
    const lastName = ref('Bērziņš')

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

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

Šajā piemērā fullName ir aprēķināta īpašība, kas ir atkarīga no firstName un lastName. Kad mainīsies firstName vai lastName, fullName tiks automātiski atjaunināts.

4. Vērotāji ar watch un watchEffect

Vērotāji (watchers) ļauj reaģēt uz izmaiņām reaktīvajā stāvoklī. Composition API nodrošina divus galvenos veidus, kā izveidot vērotājus: watch un watchEffect.

• watch: watch ļauj skaidri norādīt, kuras reaktīvās atkarības vērot. Tā kā pirmo argumentu pieņem vienu vai vairākas reaktīvās atsauces (refs, aprēķinātās īpašības vai reaktīvos objektus) un kā otro argumentu - atzvanīšanas funkciju (callback). Atzvanīšanas funkcija tiek izpildīta, kad mainās kāda no norādītajām atkarībām.
• watchEffect: watchEffect automātiski seko līdzi visām reaktīvajām atkarībām, kas tiek izmantotas tās atzvanīšanas funkcijā. Atzvanīšanas funkcija tiek izpildīta sākotnēji un pēc tam atkārtoti izpildīta, kad mainās kāda no izsekotajām atkarībām. Tas ir noderīgi, ja vēlaties veikt blakusefektus, pamatojoties uz reaktīvā stāvokļa izmaiņām, skaidri nenorādot atkarības. Tomēr esiet uzmanīgi ar watchEffect, jo tas dažreiz var radīt veiktspējas problēmas, ja tas izseko pārāk daudz atkarību.

Piemērs, izmantojot watch:

import { ref, watch } from 'vue'

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Skaitītājs mainījās no ${oldValue} uz ${newValue}`)
      }
    )

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

    return {
      count,
      increment
    }
  }
}

Piemērs, izmantojot watchEffect:

import { ref, watchEffect } from 'vue'

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

    watchEffect(() => {
      console.log(`Ziņojums ir: ${message.value}`)
    })

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

    return {
      message,
      updateMessage
    }
  }
}

5. Dzīves cikla āķi

Composition API nodrošina piekļuvi komponentu dzīves cikla "āķiem" (hooks), izmantojot funkcijas, kas sākas ar on, piemēram, onMounted, onUpdated un onUnmounted. Šīs funkcijas kā argumentu pieņem atzvanīšanas funkciju, kas tiks izpildīta, kad tiks aktivizēts attiecīgais dzīves cikla "āķis".

Piemērs:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Komponents ir pievienots (mounted)')
    })

    onUnmounted(() => {
      console.log('Komponents ir noņemts (unmounted)')
    })

    return {}
  }
}

Komponējamo funkciju izveide

Īstais Composition API spēks slēpjas spējā veidot atkārtoti lietojamas komponējamās funkcijas. Komponējama funkcija ir vienkārši funkcija, kas iekapsulē daļu komponenta loģikas un atgriež reaktīvo stāvokli un funkcijas, kuras var izmantot vairākos komponentos.

Piemērs: Izveidosim komponējamu funkciju, kas seko līdzi peles pozīcijai:

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

Tagad jūs varat izmantot šo komponējamo funkciju jebkurā komponentā:

import { useMousePosition } from './useMousePosition'

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

    return {
      x,
      y
    }
  }
}

Praktiski piemēri un lietošanas gadījumi

Apskatīsim dažus praktiskus piemērus, kā Composition API var izmantot reālās situācijās:

1. Datu ielāde

Komponējamas funkcijas izveide datu ielādei no API ir izplatīts lietošanas gadījums. Tas ļauj atkārtoti izmantot to pašu datu ielādes loģiku vairākos komponentos.

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

Pēc tam varat izmantot šo komponējamo funkciju savos komponentos šādi:

import { useFetch } from './useFetch'

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

    return {
      data,
      error,
      loading
    }
  }
}

2. Formas validācija

Formas validācija ir vēl viena joma, kur Composition API var būt ļoti noderīga. Jūs varat izveidot komponējamas funkcijas, kas iekapsulē validācijas loģiku un atkārtoti izmantot tās dažādās formās.

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 lauks ir obligāts'
        break
      } else if (rule === 'email' && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
        error = 'Nederīgs e-pasta formāts'
        break
      }
    }

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

  return {
    errors,
    validateField
  }
}

Lietošana komponentā:

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. Lietotāja autentifikācijas pārvaldība

Autentifikācijas loģika bieži var būt sarežģīta un dublēta vairākos komponentos. Composition API ļauj izveidot komponējamu funkciju, kas iekapsulē visu autentifikācijas loģiku un nodrošina tīru API jūsu komponentiem.

Piemērs: (Vienkāršots)

import { ref } from 'vue'

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

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

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

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Labākās prakses Composition API izmantošanai

Lai maksimāli izmantotu Composition API, apsveriet šādas labākās prakses:

• Saglabājiet komponējamās funkcijas fokusētas: Katrai komponējamai funkcijai ir jābūt vienam, labi definētam mērķim. Tas padara tās vieglāk saprotamas, atkārtoti lietojamas un testējamas.
• Izmantojiet aprakstošus nosaukumus: Izvēlieties nosaukumus, kas skaidri norāda komponējamās funkcijas mērķi. Tas padarīs jūsu kodu lasāmāku un uzturamāku.
• Atgrieziet tikai to, kas nepieciešams: Atgrieziet tikai to reaktīvo stāvokli un funkcijas, kas faktiski ir nepieciešamas komponentam. Tas palīdz samazināt jūsu komponentu sarežģītību un uzlabot veiktspēju.
• Apsveriet TypeScript izmantošanu: TypeScript nodrošina lielisku tipu drošību un var palīdzēt jums atklāt kļūdas agrīnā izstrādes procesā. Tas ir īpaši noderīgi, strādājot ar Composition API.
• Dokumentējiet savas komponējamās funkcijas: Pievienojiet komentārus savām komponējamām funkcijām, lai izskaidrotu to mērķi, darbības principu un visas to atkarības. Tas atvieglos citiem izstrādātājiem (un jums nākotnē) saprast un izmantot jūsu kodu.
• Testējiet savas komponējamās funkcijas: Rakstiet vienību testus, lai nodrošinātu, ka jūsu komponējamās funkcijas darbojas pareizi. Tas palīdzēs jums laicīgi atklāt kļūdas un uzlabot koda bāzes kopējo kvalitāti.
• Izmantojiet konsekventu stilu: Izveidojiet konsekventu stilu savām komponējamām funkcijām un pieturieties pie tā. Tas padarīs jūsu kodu lasāmāku un uzturamāku.

Biežākās kļūdas un kā no tām izvairīties

Lai gan Composition API piedāvā daudzas priekšrocības, ir arī dažas bieži sastopamas kļūdas, no kurām jāuzmanās:

• Pārlieku sarežģītas komponējamās funkcijas: Ir viegli aizrauties un izveidot pārāk sarežģītas komponējamās funkcijas. Centieties tās saglabāt fokusētas un vienkāršas. Ja komponējamā funkcija kļūst pārāk liela, apsveriet tās sadalīšanu mazākos, vieglāk pārvaldāmos gabalos.
• Nejaušas reaktivitātes problēmas: Pārliecinieties, ka saprotat, kā darbojas ref un reactive, un izmantojiet tos pareizi. Piemēram, tieša ref ligzdotas īpašības modificēšana, to neatritinot, var novest pie neparedzētas uzvedības.
• Nepareiza dzīves cikla "āķu" izmantošana: Pievērsiet uzmanību dzīves cikla "āķu" laika grafikam un pārliecinieties, ka tos izmantojat atbilstoši. Piemēram, nemēģiniet piekļūt DOM elementiem onBeforeMount, jo tie vēl nav izveidoti.
• Veiktspējas problēmas ar watchEffect: Esiet uzmanīgi ar atkarībām, kuras izseko watchEffect. Ja tas izseko pārāk daudz atkarību, tas var radīt veiktspējas problēmas. Apsveriet iespēju izmantot watch, lai skaidri norādītu atkarības, kuras vēlaties vērot.
• Aizmirst atreģistrēt notikumu klausītājus: Izmantojot notikumu klausītājus (event listeners) komponējamā funkcijā, pārliecinieties, ka tos atreģistrējat onUnmounted "āķī", lai novērstu atmiņas noplūdes.

Composition API un globālās komandas

Composition API veicina sadarbību globālās izstrādes komandās, veicinot:

• Standartizētu koda struktūru: Uzsvars uz komponējamām funkcijām nodrošina skaidru un konsekventu modeli koda organizēšanai, padarot to vieglāk saprotamu un pieejamu komandas locekļiem no dažādām vidēm.
• Modulāru dizainu: Sarežģītas loģikas sadalīšana atkārtoti lietojamos komponējamos elementos ļauj veidot modulārāku dizainu, kur dažādi komandas locekļi var strādāt pie neatkarīgām lietojumprogrammas daļām, netraucējot viens otra darbam.
• Uzlabotu koda pārskatīšanu: Komponējamo funkciju fokusētais raksturs vienkāršo koda pārskatīšanu, jo pārskatītāji var viegli saprast katra komponējamā elementa mērķi un funkcionalitāti.
• Zināšanu apmaiņu: Komponējamās funkcijas darbojas kā pašpietiekamas zināšanu vienības, kuras var viegli kopīgot un atkārtoti izmantot dažādos projektos un komandās.

Noslēgums

Vue.js 3 Composition API ir spēcīgs rīks, kas var ievērojami uzlabot jūsu Vue lietotņu organizāciju, atkārtotu lietojamību un testējamību. Izprotot pamatkoncepcijas un ievērojot šajā padziļinātajā apskatā izklāstītās labākās prakses, jūs varat izmantot Composition API, lai veidotu uzturamākas un mērogojamākas lietotnes globālai auditorijai. Pieņemiet Composition API un atraisiet pilnu Vue.js 3 potenciālu.

Mēs aicinām jūs eksperimentēt ar Composition API savos projektos un izpētīt plašās iespējas, ko tas piedāvā. Veiksmīgu kodēšanu!