En simpel guide til Vue.js-beregnet egenskaber

Vue.js giver en kraftfuld funktion kaldet beregnet egenskaber, der giver dig mulighed for at udføre beregninger og udlede data fra din komponents tilstand. Beregnet egenskaber er især nyttige, når du vil udføre komplekse beregninger eller transformationer baseret på reaktive dataegenskaber, mens du holder din skabelonkode ren og læsbar.

I denne guide vil vi udforske det grundlæggende om beregnede egenskaber i Vue.js, hvordan de adskiller sig fra metoder, og hvordan du bruger dem effektivt i dine Vue-komponenter.

Hvad er beregnede egenskaber?

Beregnet egenskaber er funktioner defineret i computed objektet i en Vue-komponent. I modsætning til metoder cachelagres beregnede egenskaber baseret på deres afhængigheder. Det betyder, at de kun vil revurdere, når en af ​​deres afhængigheder ændres, hvilket gør dem mere effektive til dyre operationer.

Her er et grundlæggende eksempel på en Vue-komponent, der bruger en beregnet egenskab:

<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 eksempel kombinerer den beregnede egenskab fuldnavn dataegenskaberne fornavn og efternavn for at returnere et fuldt navn. Da fuldt navn er en beregnet egenskab, opdateres den automatisk, hver gang fornavn eller efternavn ændres.

Beregnede egenskaber vs. metoder

Ved første øjekast kan beregnede egenskaber virke lig metoder, da begge kan bruges til at udføre beregninger og returnere resultater. Der er dog en vigtig forskel mellem de to:

• Metoder: Metoder revurderes hver gang de kaldes. Dette betyder, at de ikke cacher resultater og kan være mindre effektive, hvis de er beregningsmæssigt dyre.
• Beregnede egenskaber: Beregnet egenskaber cachelagres baseret på deres afhængigheder og revurderes kun, når disse afhængigheder ændres. Dette gør dem mere effektive til scenarier, hvor du har dyre beregninger.

For eksempel, hvis vi brugte en metode i stedet for en beregnet egenskab til beregningen af ​​det fulde navn, ville den blive kaldt hver gang skabelonen gengives. Med en beregnet egenskab genberegnes den kun, når en af ​​dens afhængigheder ændres.

Brug af gettere og settere med beregnede egenskaber

Beregnede egenskaber kan også have gettere og sættere. Som standard har beregnede egenskaber kun en getter, men du kan tilføje en setter til at håndtere dataopdateringer.

Her er et eksempel på en beregnet egenskab 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 eksempel har den beregnede egenskab fullName en getter, der returnerer det fulde navn, og en setter, der opdeler det indtastede navn og opdaterer dataegenskaberne firstName og efternavn.

Reaktivitet i beregnede egenskaber

Beregnet egenskaber er reaktive og opdateres automatisk, når deres afhængigheder ændres. Hvis du f.eks. ændrer værdien af ​​fornavn eller efternavn, opdateres den beregnede egenskab fuldnavn automatisk, så den afspejler den nye værdi.

Her er et eksempel, der viser denne reaktivitet:

<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 eksempel, når der klikkes på knappen, ændres fornavn til "Jane", og den beregnede egenskab fuldnavn opdateres automatisk til "Jane Doe".

Bedste praksis for brug af computeregenskaber

• Brug beregnede egenskaber til dyre beregninger, der er afhængige af reaktive data.
• Hold beregnede egenskaber enkle og fokuserede på at returnere værdier.
• Undgå bivirkninger inde i computeregenskaber; brug metoder i stedet, hvis du skal udføre handlinger.
• Brug gettere og sættere til beregnede egenskaber, når du skal håndtere både læsning og skrivning af data.
• Sørg for, at afhængigheder af beregnede egenskaber er reaktive; ellers opdateres de ikke korrekt.

Konklusion

Beregnet egenskaber er en kraftfuld funktion i Vue.js, der giver dig mulighed for at holde din kode ren, effektiv og nem at vedligeholde. De hjælper dig med at udlede data fra andre reaktive egenskaber og opdaterer automatisk, når afhængigheder ændres. Ved at forstå, hvordan du bruger beregnede egenskaber effektivt, kan du bygge mere robuste og mere effektive Vue.js-applikationer.