Metody oraz pola typu computed w Vue.js

Ten wpis jest 7 częścią z 8 w kursie Vue.js

Czasami musisz zrobić coś więcej, niż tylko wyświetlić pola komponentu w szablonie. Np. mając pola firstNamelastName chcesz wyświetlić pełne imię i nazwisko osoby. Oczywiście możesz zrobić to za pomocą wyrażenia w szablonie {{ firstName + ' ' + lastName }}. Jest to jednak mało efektywne, i to z kilku powodów. Co, jeśli tę samą wartość musisz wyświetlić w innym miejscu? Co, jeśli potrzebujesz jej również w jednej z metod komponentu? Możesz rozwiązać ten problem używając metod, albo pól wyliczonych (ang. computed).

See the Pen Metody i computed – 1 by Wojciech Urbański (@wojtiku) on CodePen.

Metody komponentów

Vue.js pozwala definiować metody, które potem możesz zawołać nie tylko z szablonu komponentu, ale również z innych metod. Aby dodać metodę do komponetu, musisz zdefiniować w nim obiekt methods (1). Pola tego obiektu będą metodami dostępnymi w komponencie (2). Aby odnieść się do takiej metody w szablonie, musisz ująć jej nazwę w wąsy i umieścić po niej nawiasy – {{ nazwaMetody() }} (3)- zupełnie tak jakbyś wołał/a funkcję. Powyższy przykład z użyciem metody wyglądałby następująco:

new Vue({
  data() {
    return {
      favouriteNumber: 42, // (5)
      firstName: "Wojciech",
      lastName: "Urbański"
    };
  },
  methods: {  // (1)
    fullName() {  // (2)
      console.log("Metoda została zawołana");  // (4)
      return this.firstName + " " + this.lastName;
    }
  }
}).$mount("#app");
<div id="app">
  <input type="number" v-model="favouriteNumber">
  <p>Metoda: {{ fullName() }}</p>  <!-- (3) -->
</div>

Pewnie zauważyłeś, że do tego przykładu, pozornie bez potrzeby, dodałem pole favouriteNumber oraz input pozwalający na jego zmianę. W metodzie umieściłem też wywołanie console.log (4). Jeśli otworzysz konsolę i zaczniesz zmieniać wartość pola favouriteNumber to zauważysz, że metoda fullName jest wywoływana przy każdej takiej zmianie – oznacza to, że Vue chcąc zaktualizować widok za każdym razem ją wywołuje. I to zupełnie bez sensu. Oczywiście jest to tylko prosty przykład, ale możliwe, że w Twojej aplikacji będziesz chciała np. przefiltrować bardzo dużą tablicę. Wtedy obciążenie będzie już znaczne. Na szczęście jest na to rozwiązanie!

See the Pen Metody i computed – 2 by Wojciech Urbański (@wojtiku) on CodePen.

Pola wyliczone, czyli computed properties

Najważniejszą cechą pól computed jest fakt, że wyniki tych wyliczeń zostaną zachowane (cache) przez Vue i przeliczone ponownie dopiero wtedy, gdy będzie to potrzebne. Pozwoli Ci to uniknąć sytuacji z powyższego przykładu.

Pola wyliczone definiujemy w sekcji computed (1) komponentu Vue. W najprostrzej postaći wyglądają one dokładnie tak samo jak metody (2). Różnią się jednak sposobem odnoszenia w szablonach, który jest bliźniaczy do zwykłych pól danych – {{ fullName }} (3). Zwracane przez nie wartości są zapamiętywane przez framework i przeliczane tylko, jeśli jedno z pól potrzebnych do obliczenia wartości się zmieni. Do tak zdefiniowanego pola wyliczonego nie możesz nic przypisać. Jego wartość jest tylko do odczytu.

new Vue({
  data() {
    return {
      favouriteNumber: 42,
      firstName: "Wojciech",
      lastName: "Urbański"
    };
  },
  computed: { // (1)
    fullName() { // (2)
      console.log("Wartość pola została wyliczona");
      return this.firstName + " " + this.lastName;
    }
  }
}).$mount("#app");
<div id="app">
  <input type="number" v-model="favouriteNumber"><br>
    <input type="tezt" v-model="firstName">
  <p>Metoda: {{ fullName }}</p> <!-- (3) -->
</div>

See the Pen Metody i computed – 3 by Wojciech Urbański (@wojtiku) on CodePen.

Kod jest również bardziej czytelny. Logika wyliczania fullName jest zamknięta w jednej, prostej funkcji, a na dodatek odnosimy się do niej nie jako do metody, ale jako do tego, czym rzeczywiście jest – pola danych, które w tym wypadku jest wyliczone.

Wprawdzie pola typu computed chowają jeszcze kilka asów w rękawie, ale na dziś to wszystko. Poruszymy ten temat ponownie w dalszych częściach kursu. Sprawdź nasze szkolenia z Vue.js!

Ćwiczenie

Otwórz konsolę w swojej przeglądarce i zmieniając wartości pól favouriteNumber oraz firstName zobacz jak zachowuje się computed property. Teraz jego wartość jest aktualizowana tylko wtedy, kiedy trzeba! Dzięki takiemu podejściu nasze aplikacje wykonują mniej niepotrzebnej pracy i są bardziej wydajne.

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
4 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
vbert
vbert
2 lat temu

„Wprawdzie pola typu computed chowają jeszcze kilka asów w rękawie,
ale na dziś to wszystko. Poruszymy ten temat ponownie w dalszych
częściach kursu.”

Jakieś wieści w kwestii dalszych części kursu?

wojtiku
wojtiku
2 lat temu
Reply to  vbert

Tak! Niedługo dalej ruszam z tematem! Stay tuned.

Miłosz
2 lat temu

Cześć, czekam z niecierpliwością na dalsze lekcje. Wrzućcie coś 🙂

wojtiku
wojtiku
2 lat temu
Reply to  Miłosz

Tak! Niedługo dalej ruszam z tematem! Stay tuned 🙂

Back to Top
Przeczytaj inne:
redux-vs-setstate
Kiedy używać state, a kiedy Redux?

Bardzo często osoby poznające bibliotekę Redux próbują przenieść cały stan każdego komponentu do Reduksowego store'a. Czy to ma sens? Czy powinnaś całkowicie przestać używać setState? Nie ma nic złego w state Naprawdę. Nie...

Zamknij