Un ghid simplu pentru proprietățile calculate Vue.js

Vue.js oferă o funcție puternică numită computed properties ​​care vă permite să efectuați calcule și să obțineți date din starea componentei dvs. Proprietățile calculate sunt deosebit de utile atunci când doriți să efectuați calcule complexe sau transformări bazate pe proprietățile reactive ale datelor, păstrând codul șablonului curat și lizibil.

În acest ghid, vom explora elementele de bază ale proprietăților calculate în Vue.js, cum diferă acestea de metode și cum să le folosim eficient în componentele Vue.

Ce sunt proprietățile calculate?

Proprietățile calculate sunt funcții definite în obiectul computed al unei componente Vue. Spre deosebire de metode, proprietățile calculate sunt stocate în cache pe baza dependențelor lor. Aceasta înseamnă că se vor reevalua doar atunci când una dintre dependențele lor se schimbă, făcându-i mai eficienți pentru operațiuni costisitoare.

Iată un exemplu de bază al unei componente Vue care utilizează o proprietate calculată:

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

În acest exemplu, proprietatea calculată fullName combină proprietățile de date firstName și lastName pentru a returna un nume complet. Deoarece fullName este o proprietate calculată, se va actualiza automat ori de câte ori se modifică firstName sau lastName.

Proprietăți calculate vs. Metode

La prima vedere, proprietățile calculate ar putea părea similare cu metodele, deoarece ambele pot fi folosite pentru a efectua calcule și a returna rezultate. Cu toate acestea, există o diferență cheie între cele două:

• Metode: Metodele sunt reevaluate de fiecare dată când sunt apelate. Aceasta înseamnă că nu memorează în cache rezultatele și pot fi mai puțin eficiente dacă sunt costisitoare din punct de vedere computațional.
• Proprietăți calculate: Proprietățile calculate sunt stocate în cache pe baza dependențelor lor și sunt reevaluate numai atunci când aceste dependențe se modifică. Acest lucru le face mai eficiente pentru scenariile în care aveți calcule costisitoare.

De exemplu, dacă am folosit o metodă în loc de o proprietate calculată pentru calculul numelui complet, aceasta ar fi apelată de fiecare dată când este redat șablonul. Cu o proprietate calculată, aceasta este recalculată numai atunci când una dintre dependențele sale se modifică.

Utilizarea Getters și Setters cu proprietăți calculate

Proprietățile calculate pot avea și getters ​​și setters. În mod implicit, proprietățile calculate au doar un getter, dar puteți adăuga un setter pentru a gestiona actualizările datelor.

Iată un exemplu de proprietate calculată atât cu un getter, cât și cu un 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>

În acest exemplu, proprietatea calculată fullName are un getter care returnează numele complet și un setter care împarte numele introdus și actualizează proprietățile de date firstName și lastName.

Reactivitate în proprietățile calculate

Proprietățile calculate sunt reactive și se vor actualiza automat când dependențele lor se schimbă. De exemplu, dacă modificați valoarea firstName sau lastName, proprietatea calculată fullName se va actualiza automat pentru a reflecta noua valoare.

Iată un exemplu care demonstrează această reactivitate:

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

În acest exemplu, când se face clic pe butonul, firstName este schimbat în "Jane", iar proprietatea calculată fullName se actualizează automat la "Jane Doe".

Cele mai bune practici pentru utilizarea proprietăților calculate

• Utilizați proprietățile calculate pentru calcule costisitoare care se bazează pe date reactive.
• Păstrați proprietățile calculate simple și concentrate pe valorile returnate.
• Evitați efectele secundare în interiorul proprietăților calculate; folosiți în schimb metode dacă trebuie să efectuați acțiuni.
• Folosiți gettere și setari pentru proprietățile calculate atunci când trebuie să gestionați atât citirea, cât și scrierea datelor.
• Asigurați-vă că dependențele proprietăților calculate sunt reactive; în caz contrar, nu se vor actualiza corect.

Concluzie

Proprietățile calculate sunt o caracteristică puternică a Vue.js care vă permite să vă păstrați codul curat, eficient și ușor de întreținut. Ele vă ajută să obțineți date din alte proprietăți reactive și să vă actualizați automat atunci când dependențele se schimbă. Înțelegând cum să utilizați în mod eficient proprietățile calculate, puteți construi aplicații Vue.js mai robuste și mai performante.