Vue.js: Zdarzenia cyklu życia

Vue.js 2.5.x

0:00Jest jeszcze jedna bardzo ważna rzecz, którą powinieneś wiedzieć o instancji Vue, a

0:04mianowicie jaki jest jej cykl życia. Mamy coś takiego jak Lifecycle Hooks,

0:10tutaj na stronie Vue.js i będę chciał ci je za moment pokazać. Natomiast najpierw przejdziemy

0:14do Lifecycle Diagram. Tutaj możesz się temu przyjrzeć

0:18na spokojnie, zobaczysz w jaki sposób cała instancja jest stworzona. W

0:22momencie kiedy wywołamy new vue, to jest wywoływana taka akcja init,

0:27tam są przypisywane różne eventy i różne inne rzeczy robi

0:31Vue. To nie jest takie dla nas super istotne. Natomiast ważne jest to, że możemy przypisać

0:35własną funkcję, która nazywa się before create i ona w tym miejscu zostanie

0:40wywołana. Do tej funkcji jak i do każdej innej nie będziemy otrzymywać żadnych

0:44parametrów, ale w niektórych funkcjach będziemy mieli już dostęp do na przykład do data. Zaraz o

0:49tym powiem. Później, kiedy Vue zajmie się już wstawianiem

0:54i reaktywnością, czyli kiedy te dane jak już będą

0:58dostępne, które są w data, kiedy gettery zostaną utworzone, to wywołać

1:02się taki hook, który nazywa się create, również możemy tutaj przypisać własną funkcję. No

1:06i później mamy, jak widzisz, kilka takich decyzji do podjęcia, skoro

1:11już widziałeś w lekcji poprzedniej jak możemy opóźnić wstawianie całej aplikacji

1:15na stronę, nie musi się to dziać od razu, to widzisz, że teraz tutaj ma to sens, czyli pytanie

1:20brzmi czy opcja el została podana tak jak robiliśmy wcześniej. Jeżeli

1:24tak, to sprawdzamy czy template jest

1:28podany. Jeżeli nie to będziemy kompilować kod HTML. Zauważ, że jest

1:33to jest dokładnie to co do tej pory robiliśmy, czyli jeżeli el było podane. Tutaj

1:38odpowiadamy sobie tak, sprawdzamy czy template jest podane, nie, bo nie

1:42jest. Kompilujemy outerHTML, czyli kod tego elementu podanego

1:47tutaj. Jeżeli template były podany to kompilujemy template. Natomiast jeżeli

1:51el nie jest podane, czyli to co mieliśmy na lekcji poprzedniej, to wtedy dopiero kiedy

1:55vm mount zostanie wykonane, czyli to co ci pokazywałem, dopiero

1:59wtedy przejdziemy tego miejsca, więc to nie musi się od razu wykonać. Możemy

2:03się zatrzymać w tym miejscu. No i zauważ, że kiedy

2:07templatka zostanie skompilowana czy to będzie tutaj czy ten kod HTML z drzewa DOM

2:12zostanie skompilowany do szablonu to wykona się event before mount,

2:17czyli przed zamontowaniem tej aplikacji w drzewie DOM również możemy wykonać jakieś

2:21akcje. Następnie poniżej zostanie stworzony

2:25na tym vm el. To jest ten el, który mogliśmy wstawiać kiedy

2:29zrobiliśmy vm mount w poprzedniej lekcji, bez podania elementu. No

2:34i wykona się zdarzenie mounted. W tym miejscu się jakby zatrzymamy

2:38i Vue będzie nasłuchiwało i w momencie kiedy jakieś dane się zmienią, na przykład zmienimy

2:42nasze first name, które mieliśmy w tym miejscu, to Vue wykona taki cykl, czyli

2:47kiedy dane się zmieniają, wykona zdarzenie before update.Następnie dokona

2:52zmian i wykona zdarzenie updated i znowu będzie nasłuchiwać w tym

2:56miejscu. Są natomiast, jak widzisz i jeszcze dodatkowe zdarzenia before destroy

3:00wykonywane przed zniszczeniem takiej instancji. Zaraz ci to pokaże i następnie

3:05destroyed, kiedy instancja jest już zniszczona i ważne, że każdy

3:09z tych kolorowych tutaj boksów, jest to nazwa funkcji jaką możemy przypisać

3:14do naszej instancji i teraz będę chciał ci to pokazać. Wstawiamy to oczywiście

3:18w tym obiekcie konfiguracyjnym. Wstawiłem wszystkie możliwe i jak widzisz mamy

3:22before create, created i tak dalej. No i zrobię jej console.log po to, żebyśmy wiedzieli kiedy

3:26to się wykonuje. Tutaj już nie będziemy opóźniać wczytywania tej aplikacji, ale

3:30gdybyśmy nie podali el, to nie wszystkie z nich się wykonają, tak jak w lekcji poprzedniej

3:34widziałeś, że możemy to zrobić za pomocą vm mount i wtedy

3:38dopiero pewne z nich tak jak mounted czy before mount się wykonają. U nas wykonają

3:42się prawie wszystkie od razu, więc odświeżmy. Widzimy before create,

3:47created before mount i mounted i na razie tyle, czyli dokładnie zatrzymaliśmy

3:51się w tym oto miejscu i nasłuchujemy

3:55na zmianę. Spróbujmy zatem coś zmienić, przejdźmy sobie tutaj i spróbujmy coś

4:00zmienić. Zmienimy tutaj Jan na Janek i zobaczmy

4:06w konsoli, co się nam pojawi. Jak widzisz before update, czyli przed zmianą i po zmianie

4:10i teraz pytanie, po co ci

4:14są te lifecycle hooks, czy często będziesz z tego korzystał. Szczerze mówiąc nie i większość

4:18z nich nie jest jakoś szczególnie potrzebna. Natomiast jeden, który jest ciekawy jest to created

4:23i w tym hook'u masz dostęp już do danych, czyli this i na

4:27przykład tutaj mieliśmy first name last name, to wszystko już tutaj będzie dostępne i co ważne

4:31w tym hook'u możesz na przykład wywołać sobie jakieś zapytanie Ajax, to

4:35będzie również później przydatne w przypadku i komponentów, czyli załóżmy, że ktoś

4:40korzysta z naszego komponentu. Komponenty będą bardzo podobne do tej instancji, która jest tutaj

4:44i chcemy kiedy taki komponent będzie osadzony, żeby wysłać zapytanie

4:48i pobrać jakieś dane. To tutaj w created możesz to zrobić. Oczywiście to będzie asynchroniczne,

4:52więc te dane mogą być dostępne dopiero za chwilkę, kiedy on już jest osadzony na stronie.

4:56Niemniej jednak będziesz tutaj mógł na przykład zrobić this data, czy this items

5:00i tutaj przypisać sobie to, co zwróci ci Ajax, czyli

5:05to jest dobre miejsce, żeby to zrobić. Często również możesz się spotkać z tym, że taki

5:09kod, na przykład wykonywanie zapytań Ajax, jest zrobiony w mounted. Natomiast moim

5:13zdaniem lepiej to zrobić w created, bo mounted jest dopiero wtedy wykonywane kiedy

5:17to wszystko jest już osadzone w drzewie DOM, natomiast czemu by nie wysłać

5:21takiego zapytania troszeczkę wcześniej. Tutaj na etapie created, gdzie wiemy, że mamy

5:25już dostęp do this i wszystkiego co jest w data, w computed czy w

5:29methods. Jeśli natomiast pisałbyś jakąś aplikację,

5:33gdzie chciałbyś jakoś dokładnie wszystko organizować, co się dzieje na stronie, to być może

5:37przydadzą ci się również takie hook'i jak before update, czy updated, żeby sprawdzać

5:42jak dane się zmieniają i tak dalej. Pamiętaj, że te funkcje nie otrzymują żadnych parametrów,

5:46ale możesz się odwołać do instancji poprzez this i wtedy będziesz mógł na przykład before

5:51update, sprawdzić jaka jest wartość powiedzmy first name, a w updated na jaką

5:55wartość się zmieniła. No i zobaczmy sobie jeszcze te dwa hooki, beforeDestroy

6:00i destroyed. Jak można zniszczyć instancję i co to oznacza. Jeżeli

6:04będziemy do niej mieli dostęp, czyli zaznaczmy ją sobie tutaj, vm0, to

6:09można na niej wykonać metodę. Przypominam, że wszystko co jest specyficzne dla Vue, a

6:14nie są to nasze dane takie jak na przykład first name, jest poprzedzone dolarem i ta metoda nazywa

6:18się destroy i można w ten sposób niszczyć instancję. Jeżeli

6:23wcisnę enter, wykona się beforeDestroy i destroyed i zauważ, że nic takiego w

6:27zasadzie się nie stało na stronie. Ale ważne jest to, że instancja Vue już nie istnieje i nie

6:33możemy tutaj już tych danych zmieniać. To znaczy gdybyśmy próbowali je zmienić. Jak

6:37widzisz, nawet się tutaj nie da, ale gdybyśmy nawet próbowali, to nie zostanie odzwierciedlone już

6:41na stronie. Jak widzisz nawet tutaj wyskoczył jakiś błąd kiedy próbowałem

6:46coś tam kliknąć. Ważne jest to, że jeżeli byś sobie zniszczył taką instancję to zmiany,

6:50które na stronie były w drzewie DOM pozostają, ale Vue już nie kontroluje tej

6:54porcji strony, więc to może być przydatne jeżeli wiesz, że powiedzmy twój

6:58komponent, który później będziemy tworzyć doszedł już do takiego momentu, że już w zasadzie nic

7:02więcej od niego nie oczekujesz. Może on miał wyświetlić tylko jakieś dane raz może kilka

7:07razy można było z jakiego przycisku skorzystać i wiesz, że powiedzmy pięciu próbach już

7:11ten komponent nie będzie jakiejś innej akcji oferował. Nie powinien być reaktywny. Może

7:16się tak zdarzyć, to będzie zależało tylko od ciebie. To w zasadzie możesz zniszczyć taką instancje

7:20za pomocą vm destroy i zwolnić pamięć, bo skoro ten komponent nie jest już

7:24potrzebny, to można go w ten sposób zniszczyć. Ważne

7:36jest to, że beforeDestroy i destroyed pozwalają ci na pewne rzeczy. Szczególnie beforeDestroy

7:42na różne czyszczenie. Jeżeli miałbyś jakieś dodatkowe biblioteki

7:46może podłączone do tego wszystkiego lub chciałbyś zamknąć jakieś połączenie, które miałbyś

7:50otwarte, powiedzmy z jakąś bazą danych, warto to zrobić właśnie tutaj w beforeDestroy. To

7:55będzie zależało już od konkretnego przypadku, ja bym chciał żebyś z tej lekcji po prostu zapamiętał,

7:59że mamy taki diagram możesz mu się jeszcze raz przyjrzeć i że możesz zareagować

8:03na różne zdarzenia, które tutaj są i być może w przyszłości wpadniesz

8:07na to że przydałoby ci się na coś zareagować. Wtedy będziesz mógł do tego wrócić, created

8:11to jest to miejsce gdzie być może najczęściej będziesz zaglądał, żeby tutaj coś

8:15wstawić. Tak jak wspomniałem, na przykład, wybrać jakieś dane kiedy montujemy taką aplikację

8:19lub komponent.