M

MLOG

Dansk

Udforsk Vue.js 3 Composition API i dybden. Lær at bygge genanvendelige, vedligeholdelsesvenlige og testbare Vue.js-applikationer med praktiske eksempler og bedste praksis for udviklere verden over.

Vue.js 3 Composition API: En Dybdegående Gennemgang for Globale Udviklere

Vue.js er hurtigt blevet et populært valg til at bygge moderne webapplikationer takket være dens imødekommende læringskurve og kraftfulde funktioner. Vue.js 3 tager dette videre med introduktionen af Composition API, en ny måde at organisere din komponentlogik på. Denne dybdegående gennemgang giver en omfattende guide til at forstå og effektivt udnytte Composition API, hvilket udstyrer dig med færdighederne til at bygge mere vedligeholdelsesvenlige, genanvendelige og testbare Vue-applikationer.

Hvad er Composition API?

Composition API er et sæt API'er, der giver os mulighed for at skrive Vue-komponenter ved hjælp af importerede funktioner i stedet for at deklarere options. I bund og grund giver det dig mulighed for at gruppere relateret logik sammen, uanset hvor det optræder i skabelonen. Dette står i kontrast til Options API (data, methods, computed, watch), som tvinger dig til at organisere kode baseret på disse foruddefinerede kategorier. Tænk på Options API som at organisere din kode efter, *hvad* det er (data, metode, osv.), hvorimod Composition API lader dig organisere kode efter, *hvad det gør*.

Kernen i Composition API kredser om setup()-funktionen. Denne funktion er indgangspunktet for at anvende Composition API i en komponent. Inde i setup() kan du definere reaktiv tilstand, beregnede egenskaber, metoder og livscyklus-hooks ved hjælp af sammensættelige funktioner (composable functions).

Hvorfor bruge Composition API?

Composition API tilbyder adskillige fordele i forhold til det traditionelle Options API, især for større og mere komplekse applikationer:

Forståelse af de Grundlæggende Koncepter

Lad os dykke ned i de centrale koncepter, der ligger til grund for Composition API:

1. setup()

Som tidligere nævnt er setup() indgangspunktet for at bruge Composition API. Det er en komponent-option, der udføres, før komponenten oprettes. Inde i setup() definerer du reaktiv tilstand, beregnede egenskaber, metoder og livscyklus-hooks, og returnerer derefter et objekt, der indeholder de værdier, du vil eksponere til skabelonen.

Eksempel:

import { ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
}

I dette eksempel bruger vi ref til at oprette en reaktiv variabel kaldet count. Vi definerer også en metode kaldet increment, der øger værdien af count. Endelig returnerer vi et objekt, der indeholder count og increment, hvilket gør dem tilgængelige i komponentens skabelon.

2. Reaktiv Tilstand med ref og reactive

Composition API giver to kernefunktioner til at skabe reaktiv tilstand: ref og reactive.

Eksempel med ref:

import { ref } from 'vue'

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

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

    return {
      message,
      updateMessage
    }
  }
}

Eksempel med 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. Beregnede Egenskaber med computed

Beregnede egenskaber (computed properties) er værdier, der er afledt af en anden reaktiv tilstand. De opdateres automatisk, når deres afhængigheder ændres. computed-funktionen tager en getter-funktion som argument og returnerer en skrivebeskyttet reaktiv ref.

Eksempel:

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

I dette eksempel er fullName en beregnet egenskab, der afhænger af firstName og lastName. Hver gang enten firstName eller lastName ændres, vil fullName automatisk blive opdateret.

4. Watchers med watch og watchEffect

Watchers giver dig mulighed for at reagere på ændringer i reaktiv tilstand. Composition API giver to hovedmåder at oprette watchers på: watch og watchEffect.

Eksempel med watch:

import { ref, watch } from 'vue'

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Count ændret fra ${oldValue} til ${newValue}`)
      }
    )

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

    return {
      count,
      increment
    }
  }
}

Eksempel med watchEffect:

import { ref, watchEffect } from 'vue'

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

    watchEffect(() => {
      console.log(`Beskeden er: ${message.value}`)
    })

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

    return {
      message,
      updateMessage
    }
  }
}

5. Livscyklus-hooks

Composition API giver adgang til komponentens livscyklus-hooks gennem funktioner, der starter med on, såsom onMounted, onUpdated og onUnmounted. Disse funktioner tager en callback som argument, som vil blive udført, når den tilsvarende livscyklus-hook udløses.

Eksempel:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Komponenten er mounted')
    })

    onUnmounted(() => {
      console.log('Komponenten er unmounted')
    })

    return {}
  }
}

Oprettelse af Sammensættelige Funktioner

Den virkelige styrke ved Composition API kommer fra evnen til at skabe genanvendelige sammensættelige funktioner (composable functions). En sammensættelig funktion er simpelthen en funktion, der indkapsler et stykke komponentlogik og returnerer reaktiv tilstand og funktioner, der kan bruges i flere komponenter.

Eksempel: Lad os oprette en sammensættelig funktion, der sporer musens position:

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

Nu kan du bruge denne sammensættelige funktion i enhver komponent:

import { useMousePosition } from './useMousePosition'

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

    return {
      x,
      y
    }
  }
}

Praktiske Eksempler og Anvendelsestilfælde

Lad os udforske nogle praktiske eksempler på, hvordan Composition API kan bruges i virkelige scenarier:

1. Datahentning

At oprette en sammensættelig funktion til at hente data fra et API er et almindeligt anvendelsestilfælde. Dette giver dig mulighed for at genbruge den samme logik til datahentning på tværs af flere komponenter.

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

Du kan derefter bruge denne sammensættelige funktion i dine komponenter således:

import { useFetch } from './useFetch'

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

    return {
      data,
      error,
      loading
    }
  }
}

2. Formularvalidering

Formularvalidering er et andet område, hvor Composition API kan være meget nyttigt. Du kan oprette sammensættelige funktioner, der indkapsler valideringslogik og genbruge dem på tværs af forskellige formularer.

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 = 'Dette felt er påkrævet'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Ugyldigt email-format'
        break
      }
    }

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

  return {
    errors,
    validateField
  }
}

Anvendelse i en 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. Håndtering af Brugergodkendelse

Godkendelseslogik kan ofte være kompleks og duplikeret på tværs af flere komponenter. Composition API giver dig mulighed for at oprette en sammensættelig funktion, der indkapsler al godkendelseslogik og giver en ren API, som dine komponenter kan bruge.

Eksempel: (Forenklet)

import { ref } from 'vue'

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

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

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

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Bedste Praksis for Brug af Composition API

For at få mest muligt ud af Composition API, bør du overveje følgende bedste praksis:

Almindelige Faldgruber og Hvordan man Undgår Dem

Selvom Composition API tilbyder mange fordele, er der også nogle almindelige faldgruber, man skal være opmærksom på:

Composition API og Globale Teams

Composition API fremmer samarbejde inden for globale udviklingsteams ved at promovere:

Konklusion

Vue.js 3 Composition API er et kraftfuldt værktøj, der markant kan forbedre organiseringen, genanvendeligheden og testbarheden af dine Vue-applikationer. Ved at forstå de centrale koncepter og følge de bedste praksis, der er beskrevet i denne dybdegående gennemgang, kan du udnytte Composition API til at bygge mere vedligeholdelsesvenlige og skalerbare applikationer for et globalt publikum. Omfavn Composition API og frigør det fulde potentiale af Vue.js 3.

Vi opfordrer dig til at eksperimentere med Composition API i dine egne projekter og udforske de enorme muligheder, det tilbyder. God kodning!