M

MLOG

Magyar

Fedezze fel a Vue.js 3 Composition API-t részletesen! Tanulja meg, hogyan építhet újrahasznosítható, karbantartható és tesztelhető Vue.js alkalmazásokat gyakorlati példákkal.

Vue.js 3 Composition API: Részletes áttekintés globális fejlesztőknek

A Vue.js gyorsan népszerű választássá vált a modern webalkalmazások építésében, köszönhetően a könnyen elsajátítható tanulási görbéjének és erőteljes funkcióinak. A Vue.js 3 ezt tovább viszi a Composition API bevezetésével, ami egy új módja a komponens logika szervezésének. Ez a részletes áttekintés átfogó útmutatót nyújt a Composition API hatékony megértéséhez és használatához, felvértezve Önt azokkal a készségekkel, amelyekkel karbantarthatóbb, újrahasznosíthatóbb és tesztelhetőbb Vue alkalmazásokat építhet.

Mi az a Composition API?

A Composition API egy olyan API-készlet, amely lehetővé teszi számunkra, hogy Vue komponenseket importált függvények használatával hozzunk létre, opciók deklarálása helyett. Lényegében lehetővé teszi a kapcsolódó logika csoportosítását, függetlenül attól, hogy hol jelenik meg a sablonban. Ez ellentétben áll az Options API-val (data, methods, computed, watch), amely arra kényszerít, hogy a kódot ezen előre meghatározott kategóriák alapján szervezzük. Gondoljon az Options API-ra úgy, mint ami a kódját aszerint szervezi, hogy *mi* az (adat, metódus stb.), míg a Composition API lehetővé teszi, hogy a kódot aszerint szervezze, hogy *mit csinál*.

A Composition API magja a setup() függvény körül forog. Ez a függvény a belépési pont a Composition API használatához egy komponensen belül. A setup() függvényen belül definiálhat reaktív állapotot, számított tulajdonságokat, metódusokat és életciklus-horgokat kompozíciós függvények (composable functions) segítségével.

Miért használjuk a Composition API-t?

A Composition API számos előnyt kínál a hagyományos Options API-val szemben, különösen nagyobb és összetettebb alkalmazások esetében:

Az alapfogalmak megértése

Merüljünk el a Composition API alapját képező kulcsfogalmakban:

1. setup()

Ahogy korábban említettük, a setup() a belépési pont a Composition API használatához. Ez egy komponens opció, amely a komponens létrehozása előtt fut le. A setup()-on belül definiálhat reaktív állapotot, számított tulajdonságokat, metódusokat és életciklus-horgokat, majd visszaad egy objektumot, amely tartalmazza azokat az értékeket, amelyeket a sablon számára elérhetővé szeretne tenni.

Példa:

import { ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
}

Ebben a példában a ref segítségével létrehozunk egy count nevű reaktív változót. Definiálunk egy increment nevű metódust is, amely növeli a count értékét. Végül visszaadunk egy objektumot, amely tartalmazza a count-ot és az increment-et, így azok elérhetővé válnak a komponens sablonjában.

2. Reaktív állapot a ref és reactive segítségével

A Composition API két alapvető függvényt biztosít a reaktív állapot létrehozásához: a ref-et és a reactive-ot.

Példa ref használatával:

import { ref } from 'vue'

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

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

    return {
      message,
      updateMessage
    }
  }
}

Példa reactive használatával:

import { reactive } from 'vue'

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

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

    return {
      state,
      updateName
    }
  }
}

3. Számított tulajdonságok a computed segítségével

A számított tulajdonságok olyan értékek, amelyek más reaktív állapotokból származnak. Automatikusan frissülnek, amikor a függőségeik megváltoznak. A computed függvény egy getter függvényt fogad el argumentumként, és egy csak olvasható reaktív ref-et ad vissza.

Példa:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('Gipsz')
    const lastName = ref('Jakab')

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

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

Ebben a példában a fullName egy számított tulajdonság, amely a firstName-től és a lastName-től függ. Amikor a firstName vagy a lastName megváltozik, a fullName automatikusan frissülni fog.

4. Figyelők a watch és watchEffect segítségével

A figyelők (watchers) lehetővé teszik, hogy reagáljunk a reaktív állapot változásaira. A Composition API két fő módot kínál a figyelők létrehozására: a watch és a watchEffect.

Példa watch használatával:

import { ref, watch } from 'vue'

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`A 'count' értéke megváltozott ${oldValue}-ról ${newValue}-ra`)
      }
    )

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

    return {
      count,
      increment
    }
  }
}

Példa watchEffect használatával:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Helló')

    watchEffect(() => {
      console.log(`Az üzenet: ${message.value}`)
    })

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

    return {
      message,
      updateMessage
    }
  }
}

5. Életciklus-horgok

A Composition API hozzáférést biztosít a komponens életciklus-horgaihoz az on-nal kezdődő függvényeken keresztül, mint például az onMounted, onUpdated és onUnmounted. Ezek a függvények egy visszahívási függvényt fogadnak el argumentumként, amely akkor hajtódik végre, amikor a megfelelő életciklus-horog aktiválódik.

Példa:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('A komponens csatlakoztatva (mounted)')
    })

    onUnmounted(() => {
      console.log('A komponens leválasztva (unmounted)')
    })

    return {}
  }
}

Kompozíciós függvények létrehozása

A Composition API valódi ereje az újrahasznosítható kompozíciós függvények (composable functions) létrehozásának képességében rejlik. Egy kompozíciós függvény egyszerűen egy olyan függvény, amely egy komponens logikai darabját foglalja magába, és reaktív állapotot és függvényeket ad vissza, amelyek több komponensben is felhasználhatók.

Példa: Hozzunk létre egy kompozíciós függvényt, amely az egér pozícióját követi:

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

Most ezt a kompozíciós függvényt bármely komponensben használhatja:

import { useMousePosition } from './useMousePosition'

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

    return {
      x,
      y
    }
  }
}

Gyakorlati példák és felhasználási esetek

Nézzünk meg néhány gyakorlati példát arra, hogyan használható a Composition API valós helyzetekben:

1. Adatlekérdezés

Egy API-ból történő adatlekérdezésre szolgáló kompozíciós függvény létrehozása gyakori felhasználási eset. Ez lehetővé teszi, hogy ugyanazt az adatlekérdezési logikát több komponensben is újra felhasználja.

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

Ezt a kompozíciós függvényt ezután a komponenseiben a következőképpen használhatja:

import { useFetch } from './useFetch'

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

    return {
      data,
      error,
      loading
    }
  }
}

2. Űrlapvalidálás

Az űrlapvalidálás egy másik terület, ahol a Composition API nagyon hasznos lehet. Létrehozhat olyan kompozíciós függvényeket, amelyek magukba zárják a validálási logikát, és újra felhasználhatja őket különböző űrlapokon.

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 = 'Ez a mező kötelező'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Érvénytelen email formátum'
        break
      }
    }

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

  return {
    errors,
    validateField
  }
}

Használat egy komponensben:

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. Felhasználói hitelesítés kezelése

A hitelesítési logika gyakran bonyolult és több komponensben is duplikált lehet. A Composition API lehetővé teszi egy olyan kompozíciós függvény létrehozását, amely magába foglalja a teljes hitelesítési logikát, és tiszta API-t biztosít a komponensek számára.

Példa: (Egyszerűsített)

import { ref } from 'vue'

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

  const login = async (username, password) => {
    // API hívás szimulálása
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // API hívás szimulálása
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Jó gyakorlatok a Composition API használatához

A Composition API maximális kihasználása érdekében vegye figyelembe a következő jó gyakorlatokat:

Gyakori buktatók és hogyan kerüljük el őket

Bár a Composition API számos előnnyel jár, van néhány gyakori buktató is, amire érdemes odafigyelni:

A Composition API és a globális csapatok

A Composition API elősegíti a globális fejlesztői csapatokon belüli együttműködést azáltal, hogy támogatja a következőket:

Konklúzió

A Vue.js 3 Composition API egy hatékony eszköz, amely jelentősen javíthatja a Vue alkalmazások szervezettségét, újrahasznosíthatóságát és tesztelhetőségét. Az alapfogalmak megértésével és a ebben a részletes áttekintésben felvázolt jó gyakorlatok követésével kiaknázhatja a Composition API-t, hogy karbantarthatóbb és skálázhatóbb alkalmazásokat építsen egy globális közönség számára. Fogadja el a Composition API-t és tárja fel a Vue.js 3 teljes potenciálját.

Bátorítjuk, hogy kísérletezzen a Composition API-val a saját projektjeiben, és fedezze fel az általa kínált hatalmas lehetőségeket. Jó kódolást!

Vue.js 3 Composition API: Részletes áttekintés globális fejlesztőknek | MLOG