En enkel guide till Vue.js beräknade egenskaper

Vue.js tillhandahåller en kraftfull funktion som kallas beräknade egenskaper som låter dig utföra beräkningar och härleda data från din komponents tillstånd. Beräknade egenskaper är särskilt användbara när du vill utföra komplexa beräkningar eller transformationer baserade på reaktiva dataegenskaper samtidigt som du håller din mallkod ren och läsbar.

I den här guiden kommer vi att utforska grunderna för beräknade egenskaper i Vue.js, hur de skiljer sig från metoder och hur man använder dem effektivt i dina Vue-komponenter.

Vad är beräknade egenskaper?

Beräknade egenskaper är funktioner som definieras inom computed-objektet i en Vue-komponent. Till skillnad från metoder cachelagras beräknade egenskaper baserat på deras beroenden. Detta innebär att de bara kommer att omvärdera när ett av deras beroenden ändras, vilket gör dem mer effektiva för dyra operationer.

Här är ett grundläggande exempel på en Vue-komponent som använder en beräknad 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 det här exemplet kombinerar den beräknade egenskapen fullName dataegenskaperna firstName och efternamn för att returnera ett fullständigt namn. Eftersom fullnamn är en beräknad egenskap uppdateras den automatiskt när förnamn eller efternamn ändras.

Beräknade egenskaper vs. metoder

Vid en första anblick kan beräknade egenskaper likna metoder, eftersom båda kan användas för att utföra beräkningar och returnera resultat. Det finns dock en viktig skillnad mellan de två:

• Metoder: Metoder omvärderas varje gång de anropas. Detta innebär att de inte cachelagrar resultat och kan vara mindre effektiva om de är beräkningsmässigt dyra.
• Beräknade egenskaper: Beräknade egenskaper cachelagras baserat på deras beroenden och omvärderas bara när dessa beroenden ändras. Detta gör dem mer effektiva för scenarier där du har dyra beräkningar.

Om vi ​​till exempel använde en metod istället för en beräknad egenskap för beräkningen av det fullständiga namnet, skulle den anropas varje gång mallen renderas. Med en beräknad egenskap beräknas den bara om när ett av dess beroenden ändras.

Använda getters och setters med beräknade egenskaper

Beräknade egenskaper kan också ha getters ​​och setters. Som standard har beräknade egenskaper bara en getter, men du kan lägga till en setter för att hantera datauppdateringar.

Här är ett exempel på en beräknad egenskap med både en getter och 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 det här exemplet har den beräknade egenskapen fullName en getter som returnerar det fullständiga namnet och en setter som delar upp det angivna namnet och uppdaterar dataegenskaperna firstName och efternamn.

Reaktivitet i beräknade egenskaper

Beräknade egenskaper är reaktiva och uppdateras automatiskt när deras beroenden ändras. Om du till exempel ändrar värdet för firstName eller efternamn, kommer den beräknade egenskapen fullName automatiskt att uppdateras för att återspegla det nya värdet.

Här är ett exempel som visar denna 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 det här exemplet, när knappen klickas, ändras firstName till "Jane", och den beräknade egenskapen fullName uppdateras automatiskt till "Jane Doe".

Bästa metoder för att använda datoregenskaper

• Använd beräknade egenskaper för dyra beräkningar som bygger på reaktiva data.
• Håll beräknade egenskaper enkla och fokuserade på att returnera värden.
• Undvik biverkningar inuti datoriserade egenskaper; använd metoder istället om du behöver utföra åtgärder.
• Använd getters och seters för beräknade egenskaper när du behöver hantera både läsning och skrivning av data.
• Se till att beroenden av beräknade egenskaper är reaktiva; annars kommer de inte att uppdateras korrekt.

Slutsats

Beräknade egenskaper är en kraftfull funktion i Vue.js som låter dig hålla din kod ren, effektiv och enkel att underhålla. De hjälper dig att hämta data från andra reaktiva egenskaper och uppdateras automatiskt när beroenden ändras. Genom att förstå hur man använder beräknade egenskaper effektivt kan du bygga mer robusta och prestandafulla Vue.js-applikationer.