Een eenvoudige handleiding voor berekende eigenschappen van Vue.js

Vue.js biedt een krachtige functie genaamd computed properties ​​waarmee u berekeningen kunt uitvoeren en gegevens kunt afleiden uit de status van uw component. Computed properties zijn met name handig als u complexe berekeningen of transformaties wilt uitvoeren op basis van reactieve data-eigenschappen, terwijl u uw templatecode schoon en leesbaar houdt.

In deze handleiding bespreken we de basisprincipes van berekende eigenschappen in Vue.js, hoe ze verschillen van methoden en hoe u ze effectief kunt gebruiken in uw Vue-componenten.

Wat zijn berekende eigenschappen?

Berekende eigenschappen zijn functies die zijn gedefinieerd binnen het berekende-object van een Vue-component. In tegenstelling tot methoden worden berekende eigenschappen gecached op basis van hun afhankelijkheden. Dit betekent dat ze alleen opnieuw worden geëvalueerd wanneer een van hun afhankelijkheden verandert, waardoor ze efficiënter zijn voor dure bewerkingen.

Hier is een eenvoudig voorbeeld van een Vue-component die gebruikmaakt van een berekende eigenschap:

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

In dit voorbeeld combineert de berekende eigenschap fullName de gegevenseigenschappen firstName en lastName om een ​​volledige naam te retourneren. Omdat fullName een berekende eigenschap is, wordt deze automatisch bijgewerkt wanneer firstName of lastName verandert.

Berekende eigenschappen versus methoden

Op het eerste gezicht lijken computed properties misschien op methods, omdat beide gebruikt kunnen worden om berekeningen uit te voeren en resultaten te retourneren. Er is echter een belangrijk verschil tussen de twee:

• Methoden: Methoden worden elke keer dat ze worden aangeroepen opnieuw geëvalueerd. Dit betekent dat ze geen resultaten cachen en minder efficiënt kunnen zijn als ze rekenintensief zijn.
• Berekende eigenschappen: Berekende eigenschappen worden gecached op basis van hun afhankelijkheden en worden alleen opnieuw geëvalueerd wanneer die afhankelijkheden veranderen. Dit maakt ze efficiënter voor scenario's waarin u dure berekeningen hebt.

Als we bijvoorbeeld een methode zouden gebruiken in plaats van een berekende eigenschap voor de berekening van de volledige naam, zou deze elke keer worden aangeroepen als de sjabloon wordt gerenderd. Met een berekende eigenschap wordt deze alleen opnieuw berekend als een van de afhankelijkheden verandert.

Getters en setters gebruiken met berekende eigenschappen

Berekende eigenschappen kunnen ook getters ​​en setters ​​hebben. Standaard hebben berekende eigenschappen alleen een getter, maar u kunt een setter toevoegen om gegevensupdates te verwerken.

Hier is een voorbeeld van een berekende eigenschap met zowel een getter als een 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>

In dit voorbeeld heeft de berekende eigenschap fullName een getter die de volledige naam retourneert en een setter die de ingevoerde naam splitst en de gegevenseigenschappen firstName en lastName bijwerkt.

Reactiviteit in berekende eigenschappen

Berekende eigenschappen zijn reactief en worden automatisch bijgewerkt wanneer hun afhankelijkheden veranderen. Als u bijvoorbeeld de waarde van firstName of lastName wijzigt, wordt de berekende eigenschap fullName automatisch bijgewerkt om de nieuwe waarde weer te geven.

Hier is een voorbeeld dat deze reactiviteit illustreert:

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

In dit voorbeeld wordt firstName gewijzigd in "Jane" wanneer op de knop wordt geklikt, en wordt de berekende eigenschap fullName automatisch bijgewerkt naar "Jane Doe".

Aanbevolen procedures voor het gebruik van berekende eigenschappen

• Gebruik berekende eigenschappen voor dure berekeningen die afhankelijk zijn van reactieve gegevens.
• Houd berekende eigenschappen eenvoudig en gericht op het retourneren van waarden.
• Voorkom bijwerkingen in berekende eigenschappen; gebruik in plaats daarvan methoden als u acties moet uitvoeren.
• Gebruik getters en setters voor berekende eigenschappen wanneer u zowel lees- als schrijfgegevens moet verwerken.
• Zorg ervoor dat de afhankelijkheden van berekende eigenschappen reactief zijn, anders worden ze niet correct bijgewerkt.

Conclusie

Computed properties zijn een krachtige feature van Vue.js waarmee u uw code schoon, efficiënt en eenvoudig te onderhouden kunt houden. Ze helpen u gegevens af te leiden van andere reactieve properties en worden automatisch bijgewerkt wanneer afhankelijkheden veranderen. Door te begrijpen hoe u computed properties effectief kunt gebruiken, kunt u robuustere en performantere Vue.js-applicaties bouwen.