Sådan destrukturerer du props i Vue 3 uden at miste reaktivitet

Hvis du har arbejdet med Vue 3, ved du, at hvis du destrukturerer props, mister du reaktivitet, hvilket kan være et problem og føre til uventede problemer i din applikation. For ikke så længe siden skrev jeg en artikel om dette, som du kan læse her.

I Vue 3 sker overførsel af data mellem komponenter via props. Når en komponent modtager props, kan du destrukturere dem for at få adgang til de enkelte stykker data. Men hvis du ikke er forsigtig, kan destrukturering af props få reaktivitetssystemet i Vue til at bryde sammen, som nævnt. I denne artikel udforsker vi, hvorfor dette sker, og hvordan du destrukturerer props på en måde, der bevarer reaktiviteten.

Hvorfor destrukturering af props kan bryde reaktiviteten

Vues reaktivitetssystem er baseret på proxies og er afhængigt af, at det kan spore, hvilke egenskaber på et objekt der tilgås, og når de ændres. Når en komponent modtager et objekt som prop, opretter Vue en reaktiv getter og setter for hver egenskab på det objekt. Det giver Vue mulighed for at detektere, når en egenskab ændres, og opdatere komponenten i overensstemmelse hermed.

Når du destrukturerer en objekt-prop, opretter du i bund og grund et nyt objekt, der ikke længere er reaktivt. Det skyldes, at de reaktive getters og setters, som Vue oprettede for det originale objekt, ikke overføres til det nye objekt. Som resultat vil ændringer foretaget på det destrukturerede objekt ikke udløse reaktivitetsopdateringer. Hvis du ikke er bevidst om dette som udvikler, vil du højst sandsynligt opleve utilsigtede fejl og sideeffekter i din applikation.

Sådan destrukturerer du props uden at bryde reaktiviteten

For at destrukturere props i Vue 3 uden at miste reaktivitet kan du bruge toRefs-funktionen. toRefs tager et objekt og returnerer et nyt objekt, hvor hver egenskab er en ref. En ref er et reaktivt objekt, der indeholder en enkelt værdi.

Lad os se på et eksempel på, hvordan dette gøres!

<template>
  <div>
    <p>{{ firstName }}</p>
    <p>{{ lastName }}</p>
  </div>
</template>

<script>
import { toRefs } from 'vue';

export default {
  props: {
    person: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const { firstName, lastName } = toRefs(props.person);
    return { firstName, lastName };
  },
};
</script>

I ovenstående eksempel bruger vi toRefs-funktionen til at destrukturere person-proppen til firstName- og lastName-refs. Ved at returnere disse refs fra setup-funktionen kan vi bruge dem i vores template uden at miste reaktivitet.

Det betyder, at hvis person-proppen ændres udefra på denne komponent, vil det propagere korrekt ind i denne komponent og rendere ændringerne til person.

Hvis for eksempel person-proppen opdateres i parent-komponenten, vil de nye værdier for firstName og lastName automatisk blive opdateret i child-komponenten uden yderligere opsætning eller konfiguration. Det skyldes, at toRefs opretter reaktive refs, der stadig er forbundet til det originale objekt-prop, så eventuelle ændringer foretaget på det originale objekt vil blive afspejlet i de reaktive refs.

Overordnet set er brugen af toRefs til at destrukturere props i Vue 3 en fremragende måde at bevare reaktivitet og sikre, at dine komponenter forbliver synkroniserede med ændringer foretaget på deres props udefra.

Hvad med ydeevnen?

At bruge toRefs til at destrukturere props i Vue 3 har en lille ydeevneomkostning, men den er generelt acceptabel i de fleste tilfælde.

Når du destrukturerer en objekt-prop med toRefs, skal Vue oprette en ny ref for hver egenskab på objektet. Det betyder, at der skal oprettes flere reaktive objekter, hvilket kan øge hukommelsesforbruget og en smule forsinke reaktivitetssystemet.

Dog er ydeevnepåvirkningen ved at bruge toRefs normalt minimal, især sammenlignet med fordelene ved at bevare reaktivitet, når man destrukturerer props. Faktisk er toRefs-funktionen indbygget i Vue 3 specifikt for at hjælpe med at løse de reaktivitetsproblemer, der kan opstå ved destrukturering af props, så det er en anbefalet tilgang i mange brugsscenarier.

Når det er sagt, er det altid en god idé at holde øje med ydeevnen af dine Vue-komponenter, især hvis de renderer store mængder data eller håndterer kompleks logik. Hvis du bemærker væsentlige forsinkelser eller hukommelsesproblemer, kan du overveje alternative tilgange eller optimeringer. Men i de fleste tilfælde bør brugen af toRefs til at destrukturere props ikke forårsage nogen væsentlige ydeevneproblemer.

Destrukturering af props i Vue 3 kan være en bekvem måde at få adgang til individuelle stykker data. Men hvis du ikke er forsigtig, kan det få reaktivitetssystemet til at bryde sammen. Ved at bruge toRefs-funktionen kan du destrukturere props uden at miste reaktivitet. Det giver dig mulighed for at skrive mere koncis og læsbar kode uden at gå på kompromis med ydeevne eller funktionalitet.