Vue.js - podstawowe hooki, funkcje i właściwości w komponentach

Zacznijmy od początku. Czym jest komponent?

Spójrz na jakąkolwiek stronę internetową. Przyjmując standardy, zakładam, że posiada ona takie elementy jak na przykład menu, odnośniki, buttony, slider etc. Każdy z tych elementów jest właśnie komponentem wykorzystywanym na stronie. Należy pamiętać, że komponent może być również zbiorem mniejszych komponentów, aż do bazowego elementu na stronie. Na przykładzie menu widzimy już cały zbiór elementów, począwszy od zwykłego odnośnika po mniej lub bardziej skomplikowane elementy rozwijane i zwijane. Całość tworzy komponent “menu”, natomiast w środku tego komponentu znajduje się pojedynczy komponent z konkretnym elementem.

W przypadku dropdowna, rozbijamy komponent na jeszcze więcej komponentów, czyli przykładowo odnośnik w elemencie rozwijanym. Główną zaletą rozbijania elementów na poszczególne komponenty jest to, że możemy wykorzystywać je ilekroć tylko będą nam przydatne.

Spójrz zatem na przykład wizualny. Poniżej przedstawiłem menu naszej strony. Zobacz, na ile komponentów można je podzielić. Każdym pojedynczym kolorem zaznaczyłem jeden komponent, z którego finalnie składa się całe menu.

Struktura komponentu przygotowanego w Visual Studio Code

Komponent składa się z trzech głównych elementów:

• Template, czyli struktura HTML która zostanie wykorzystana na stronie internetowej. Warto zapamiętać, że tutaj może być tylko jeden element oplatający całą strukturę naszego komponentu. W przykładzie pod tekstem doraźnie widać element który będzie zawierał całą strukturę.
• Script, czyli wszelkie funkcjonalności, które będzie obsługiwał komponent
• Style, po prostu style, które nadadzą atrakcyjności wizualnej naszemu komponentowi. Atrybut “scoped” pozwala ingerować tylko w dany komponent. Oznacza to, iż jeśli będziemy mieli na stronie więcej elementów o takiej samej klasie, to przy użyciu tego atrybutu, nie będzie on dziedziczył stylów po identycznych klasach znajdujących się na stronie.

Podstawowe funkcje oraz właściwości dostępne w komponencie (Options API), które oferuje nam Vue.js

1. Propsy- to wartości, bądź argumenty, które przekazujemy od strony rodzica do komponentu, który chcemy stworzyć. Pozwala nam to zarządzać treścią w komponencie lub wykonywać w nim operacje bazujące na wartościach innego komponentu. Wartości przekazywane w propsach mogą być statyczne lub dynamiczne. Poniżej utworzymy propsa w komponencie, który będzie otrzymywał imię, a następnie wyświetlał je na ekranie użytkownika

   Tworzenie propsa:

   

   Renderowanie komponentu z przekazanym propsem:

   

2. Data (dane)- są funkcją w komponencie i mogą mieć jedną lub więcej zmiennych. Zakres tych zmiennych jest ograniczony do komponentu. Zmienne można zainicjować do wartości lub po prostu przypisać typ. Trzeba mieć na uwadzę, że funkcja musi zwracać obiekt z właściwościami.

   

3. Computed- Według wielu osób, computed jest bardzo podobne do funkcji Data, natomiast computed ma bardzo wiele zalet względem wyżej opisanej funkcji. Computed co najważniejsze, nasłuchuje na zmiany w obrębie wartości, które są wykorzystywane. Możemy już na starcie zwracać przefiltrowane dane lub wartości wyliczone w zależności od warunków. Computed propertiesużywane są do często zmienianych wartości wyświetlanych na stronie. Służy ona również do czytelniejszego utrzymania kodu.

   

   Warto dodać, że jeśli zmienna “age” byłaby przekazywana w Propsie, moglibyśmy dla każdej nowo dodanej osoby sprawdzać pełnoletność już na samym starcie, gdy tylko komponent zostanie wyrenderowany na stronie. Zauważ, jak klarowne i zrozumiałe jest wyświetlenie informacji o pełnoletności w sekcji “Template”.

4. Methods- w tej właściwości definiujemy, jak sama nazwa wskazuje, wszystkie metody, które będzie obsługiwać dany komponent. Różnica względem “computed” jest taka, że metoda musi zostać wywołana, by wartości zostały zaktualizowane, natomiast w computed dzieje się to automatycznie, jeżeli tylko wykryta zostanie zmiana na nasłuchiwanej zmiennej. Zauważ, że w przykładzie poniżej, przycisk nasłuchuje na wywołanie metody po kliknięciu. Tylko wtedy zostanie wywołana ta funkcja.

   

5. Mounted- funkcja która wykonuje się tylko jeden raz. Wywołanie funkcji następuje wtedy, gdy komponent został wyrenderowany na stronie i mamy już dostęp do elementów znajdujących się w DOM’ie. W moim przypadku często służy do rozwiązywania problemów.

   

Podsumownie

Z podstawowych, najczęściej używanych hooków wymieniłem już chyba wszystkie, których będziesz używał na początku swojej pracy z frameworkiem Vue.js. Oczywiście zachęcam do przetestowania wyżej wymienionych hooków jak i systematycznego wykorzystywania ich w celu utrwalenia wiedzy. Dodatkowo zapraszam Cię na stronę oficjalnej dokumentacji, gdzie znajdziesz wszystkie hooki, wraz z ich wyjaśnieniami oraz przykładami. Link do dokumentacji Vue.js -> https://vuejs.org/api/