Prosty przewodnik po obliczonych właściwościach Vue.js

Vue.js oferuje potężną funkcję o nazwie computed properties, która umożliwia wykonywanie obliczeń i uzyskiwanie danych ze stanu komponentu. Obliczone właściwości są szczególnie przydatne, gdy chcesz wykonywać złożone obliczenia lub transformacje w oparciu o reaktywne właściwości danych, zachowując jednocześnie czysty i czytelny kod szablonu.

W tym przewodniku przyjrzymy się podstawom właściwości obliczeniowych w Vue.js, temu, czym różnią się one od metod, a także temu, jak skutecznie je wykorzystywać w komponentach Vue.

Czym są właściwości obliczeniowe?

Obliczone właściwości to funkcje zdefiniowane w obiekcie computed komponentu Vue. W przeciwieństwie do metod, obliczone właściwości są buforowane na podstawie ich zależności. Oznacza to, że zostaną ponownie ocenione tylko wtedy, gdy jedna z ich zależności ulegnie zmianie, co czyni je bardziej wydajnymi w przypadku kosztownych operacji.

Oto podstawowy przykład komponentu Vue wykorzystującego obliczoną właściwość:

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

W tym przykładzie obliczona właściwość fullName łączy właściwości danych firstName i lastName, aby zwrócić pełną nazwę. Ponieważ fullName jest obliczoną właściwością, będzie ona automatycznie aktualizowana za każdym razem, gdy firstName lub lastName ulegnie zmianie.

Obliczone właściwości kontra metody

Na pierwszy rzut oka obliczone właściwości mogą wydawać się podobne do metod, ponieważ obie mogą być używane do wykonywania obliczeń i zwracania wyników. Istnieje jednak kluczowa różnica między nimi:

• Metody: Metody są ponownie oceniane za każdym razem, gdy są wywoływane. Oznacza to, że nie buforują wyników i mogą być mniej wydajne, jeśli są obliczeniowo kosztowne.
• Obliczone właściwości: Obliczone właściwości są buforowane na podstawie ich zależności i są ponownie oceniane tylko wtedy, gdy te zależności się zmieniają. Dzięki temu są bardziej wydajne w scenariuszach, w których masz kosztowne obliczenia.

Na przykład, gdybyśmy użyli metody zamiast obliczonej właściwości do obliczenia pełnej nazwy, byłaby ona wywoływana za każdym razem, gdy szablon jest renderowany. W przypadku obliczonej właściwości jest ona przeliczana tylko wtedy, gdy zmienia się jedna z jej zależności.

Używanie getterów i setterów z obliczonymi właściwościami

Obliczone właściwości mogą również mieć getters ​​i setters. Domyślnie obliczone właściwości mają tylko getter, ale możesz dodać setter, aby obsługiwać aktualizacje danych.

Oto przykład obliczonej właściwości z funkcją getter i 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>

W tym przykładzie obliczona właściwość fullName ma metodę pobierającą, która zwraca pełną nazwę, oraz metodę ustawiającą, która dzieli wprowadzoną nazwę i aktualizuje właściwości danych firstName i lastName.

Reaktywność w obliczonych właściwościach

Obliczone właściwości są reaktywne i automatycznie aktualizują się, gdy zmieniają się ich zależności. Na przykład, jeśli zmienisz wartość firstName lub lastName, obliczona właściwość fullName automatycznie zaktualizuje się, aby odzwierciedlić nową wartość.

Oto przykład ilustrujący tę reaktywność:

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

W tym przykładzie po kliknięciu przycisku firstName zostaje zmienione na "Jane", a obliczona właściwość fullName zostaje automatycznie zaktualizowana do "Jane Doe".

Najlepsze praktyki korzystania z obliczonych właściwości

• Użyj obliczonych właściwości do kosztownych obliczeń, które opierają się na reaktywnych danych.
• Utrzymuj obliczane właściwości proste i skoncentruj się na zwracaniu wartości.
• Unikaj efektów ubocznych wewnątrz obliczonych właściwości; jeśli musisz wykonać jakieś czynności, używaj metod.
• Używaj metod getter i setter dla właściwości obliczeniowych, gdy zachodzi potrzeba zarówno odczytu, jak i zapisu danych.
• Upewnij się, że zależności obliczonych właściwości są reaktywne; w przeciwnym razie nie zostaną poprawnie zaktualizowane.

Wniosek

Obliczone właściwości to potężna funkcja Vue.js, która pozwala zachować kod czysty, wydajny i łatwy w utrzymaniu. Pomagają one wyprowadzić dane z innych reaktywnych właściwości i automatycznie aktualizować się, gdy zmieniają się zależności. Rozumiejąc, jak skutecznie używać obliczonych właściwości, możesz tworzyć bardziej niezawodne i wydajne aplikacje Vue.js.