En enkel guide til Vue.js beregnede egenskaper

Vue.js gir en kraftig funksjon kalt beregnet egenskaper som lar deg utføre beregninger og utlede data fra komponentens tilstand. Beregnede egenskaper er spesielt nyttige når du vil utføre komplekse beregninger eller transformasjoner basert på reaktive dataegenskaper samtidig som du holder malkoden ren og lesbar.

I denne veiledningen vil vi utforske det grunnleggende om beregnede egenskaper i Vue.js, hvordan de skiller seg fra metoder, og hvordan du bruker dem effektivt i Vue-komponentene dine.

Hva er beregnede egenskaper?

Beregnet egenskaper er funksjoner definert i computed-objektet til en Vue-komponent. I motsetning til metoder, bufres beregnede egenskaper basert på deres avhengigheter. Dette betyr at de bare vil revurdere når en av avhengighetene deres endres, noe som gjør dem mer effektive for dyre operasjoner.

Her er et grunnleggende eksempel på en Vue-komponent som bruker en beregnet egenskap:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

I dette eksemplet kombinerer den beregnede egenskapen fullName dataegenskapene fornavn og etternavn for å returnere et fullt navn. Siden fullName er en beregnet egenskap, vil den automatisk oppdateres hver gang fornavn eller etternavn endres.

Beregnede egenskaper vs. metoder

Ved første øyekast kan beregnede egenskaper virke lik metoder, siden begge kan brukes til å utføre beregninger og returnere resultater. Imidlertid er det en nøkkelforskjell mellom de to:

• Metoder: Metoder revurderes hver gang de kalles. Dette betyr at de ikke hurtigbufrer resultater og kan være mindre effektive hvis de er beregningsmessig dyre.
• Beregnede egenskaper: Beregnet egenskaper bufres basert på deres avhengigheter og evalueres bare på nytt når disse avhengighetene endres. Dette gjør dem mer effektive for scenarier der du har dyre beregninger.

Hvis vi for eksempel brukte en metode i stedet for en beregnet egenskap for beregningen av fullt navn, vil den bli kalt hver gang malen gjengis. Med en beregnet egenskap beregnes den bare på nytt når en av avhengighetene endres.

Bruke gettere og settere med beregnede egenskaper

Beregnede egenskaper kan også ha gettere og settere. Som standard har beregnede egenskaper bare en getter, men du kan legge til en setter for å håndtere dataoppdateringer.

Her er et eksempel på en beregnet egenskap med både en getter og en setter:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Enter your full name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

I dette eksemplet har den beregnede egenskapen fullName en getter som returnerer det fulle navnet og en setter som deler det angitte navnet og oppdaterer dataegenskapene firstName og etterName.

Reaktivitet i beregnede egenskaper

Beregnet egenskaper er reaktive og oppdateres automatisk når avhengighetene deres endres. For eksempel, hvis du endrer verdien av fornavn eller etternavn, vil den beregnede egenskapen fullName automatisk oppdateres for å gjenspeile den nye verdien.

Her er et eksempel som viser denne reaktiviteten:

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="firstName = 'Jane'">Change First Name to Jane</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

I dette eksemplet, når knappen klikkes, endres fornavn til "Jane", og fullName beregnet egenskap oppdateres automatisk til "Jane Doe".

Beste praksis for bruk av beregnede egenskaper

• Bruk beregnede egenskaper for dyre beregninger som er avhengige av reaktive data.
• Hold beregnede egenskaper enkle og fokusert på å returnere verdier.
• Unngå bivirkninger i datamaskinegenskaper; bruk metoder i stedet hvis du trenger å utføre handlinger.
• Bruk gettere og settere for beregnede egenskaper når du skal håndtere både lesing og skriving av data.
• Sørg for at avhengigheter av beregnede egenskaper er reaktive; ellers vil de ikke oppdateres riktig.

Konklusjon

Beregnet egenskaper er en kraftig funksjon i Vue.js som lar deg holde koden din ren, effektiv og enkel å vedlikeholde. De hjelper deg med å utlede data fra andre reaktive egenskaper og oppdateres automatisk når avhengigheter endres. Ved å forstå hvordan du bruker beregnede egenskaper effektivt, kan du bygge mer robuste og mer effektive Vue.js-applikasjoner.