Vue.js: Wyliczone właściwości

Vue.js 2.5.x

0:00Wiesz już w jaki sposób możemy przypisywać dane do instancji

0:04Vue i jak je wykorzystywać potem w szablonie. Również widziałeś jak korzystać

0:08z metod, natomiast taką trzecią składową, która działa podobnie są

0:12wyliczone właściwości, czyli z angielskiego computed properties i teraz

0:16jeżeli byśmy sobie tutaj przeszli, zobacz że do data dodałem sobie first name, last name Jan

0:20Kowalski będę to chciał za moment wyświetlić i co jest ważne to nie

0:25mówiłem ci jeszcze o tym, ale w tej interpolacji tutaj możemy nie tylko się

0:29odwołać na przykład do first name, ale możemy wykonywać dowolne wyrażenia JavaScript'owe. Nie

0:34zadziałają instrukcje takie złożone jak na przykład if, ale proste wyrażenia

0:38na przykład dwa plus dwa, zobacz, bez problemu nam zadziałają i Vue

0:42nam to wyliczy jako 4. Z tego powodu, jeżeli chciałbym pełne imię i nazwisko

0:46wyświetlić, to mogę napisać first name i tak normalnie jak w JavaScript'ie to

0:51robimy. Połączyć to z takim stringiem gdzie

0:55mamy jedną spację i dopisać do tego last name, to nam bez problemu

0:59zadziała. Natomiast mógłbyś pomyśleć, że w zasadzie wolałbyś sobie odseparować

1:03tę logikę, która jest tutaj do na przykład metody i moglibyśmy

1:07stworzyć metodę którą byśmy nazywali full name i z niej

1:12byśmy to chcieli zwrócić, więc tutaj byśmy napisali return i pamiętaj,

1:16że żeby się odwołać do czegoś co jest w data lub do innej metody, która by tutaj była,

1:20to robimy to poprzez this, bo wszystkie rzeczy, raz jeszcze przypominam, które są

1:24w data i w methods są proksowane do głównej instancji,

1:28dlatego są dostępne poprzez this, więc to nie jest tak, że this kieruje

1:32na data, nie, wszystkie te rzeczy są przypisywane bezpośrednio

1:36do tej instancji, powiemy sobie o tym później trochę więcej, więc this

1:40first name i jak najbardziej możemy tutaj zrobić konkatenację z this last

1:46name i teraz byśmy taką metodę tutaj mogli wywołać pisząc

1:50po prostu full name, ale oczywiście musimy

1:54ją wywołać w ten sposób. Po odświeżeniu będzie to działać tak samo, natomiast

1:58jest jeszcze jedna lepsza metoda na to, aby wyświetlić

2:03to w ten sposób, bo co jest ważne to i wynika to z ograniczenień samego języka

2:07JavaScript. Nie mogę tutaj stworzyć full name i napisać że to jest this first

2:11name plus this last name, bo na etapie tworzenia tego obiektu this

2:15nie będzie kierować na ten obiekt. Natomiast możemy dodać sobie

2:19tutaj klucz, który się nazywa computed jest to również

2:23obiekt i w nim możemy dodawać właściwości. Chciałbym tutaj wpisać full

2:28name bez wzywania tylko jako metodę, dlatego usunę to z metody,

2:32a wstawię tutaj i będziemy mieli full name i jest to funkcja. Natomiast

2:37jeżeli podamy to w ten sposób Vue wywoła to jako właśnie

2:41funkcje i to co tam jest nam zwróci i to nam również zadziała. Natomiast

2:45mógłbyś zapytać czy jest jakaś różnica pomiędzy computed a methods,

2:49poza tym, że przy computed nie muszę podawać tych nawiasów okrągłych, czyli nie

2:53wywołuje takiej metody. Dobre pytanie. Oczywiście jest taka różnica i

2:58już spieszę ci z wyjaśnieniem jaka jest różnica. Najważniejsza

3:03różnica jest taka i ona wynika z bardzo dobrej optymalizacji Vue czy

3:07z dążenia Vue do bycia wydajnym framework'iem i ta różnica polega na tym, że metody są

3:11wywoływane za każdym razem kiedy Vue renderuje widok od nowa. Teraz

3:15pytanie kiedy Vue renderuje widok od nowa. Otóż wtedy kiedy zmienią się jakieś dane.

3:20Mówiłem ci, że za pomocą wirtualnego DOM'u Vue wie, że na przykład ma nie

3:24zmieniać danych w jakimś jednym elemencie, ale zmienić w drugim. Natomiast sam

3:28fakt, że Vue próbuje coś zmienić, coś analizuje w tym wirtualnym DOM'ie, jest

3:32tak naprawdę wykonywany wtedy, kiedy jakieś dane się zmienią i

3:36wszystkie metody wtedy zawsze będą wykonywane od nowa, natomiast computed properties

3:41nie. Vue potrafi sobie przeanalizować, że w takiej computed

3:45o nazwie full name korzystamy z first name i last name, a więc jeżeli tutaj

3:49będzie rendering całej tej aplikacji i tego szablonu to Vue

3:53sobie sprawdzi, że ani first name ani last name się nie zmieniło, więc w zasadzie nie

3:57będzie wywoływać tej funkcji od nowa, tylko zwróci zapisaną wcześniej w pamięci

4:01podręcznej wartość i to można udowodnić robiąc console.log i wpiszemy

4:05tutaj na przykład full name. Będziemy wiedzieli, że jeśli taki console.log się

4:09wykona to ta funkcja się wykonała. Zobaczmy, widzimy że to się na pewno wykonało,

4:14natomiast jak teraz sprawić, żeby Vue od nowa coś tutaj spróbowało przerenderować. Może

4:20zrobimy to tak, że dodamy do tego data jakąś nową

4:24właściwość, będzie to powiedzmy age: 32, to nie

4:28ma na razie znaczenia i wstawimy ją w tym miejscu, 32,

4:33czy w zasadzie age, okej to mam dynamicznie podmienione. Pojawiło nam się

4:37to tutaj, mamy console.log full name i teraz przejdźmy do panelu

4:41Vue i zmienimy sobie wartość 32. Przy okazji fajna rzecz, to

4:46narzędzie zauważ, jeżeli wykryje, że jest to number, to pozwala nam dodawać i odejmować, a

4:50również odpowiednimi skrótami klawiszowymi można dodawać po 5, 10

4:55czy po 100 wartości. W tym przypadku tutaj możemy tylko zmienić

4:59ten string. Jeżeli cokolwiek tutaj zmienię, zobacz, że na stronie ta

5:03wartość się zmienia, ale zobaczymy do konsoli czy full name się wykonało ponownie,

5:07nie i to pokazuje, że Vue jest na tyle inteligentnym framework'iem,

5:12że wie, że nie ma sensu tej funkcji wykonywać od nowa, bo na pewno wynik

5:16i tak będzie taki sam, więc to nie jest tak że Vue ją wykonuje, ale nie podmienia tego

5:20na stronie, bo wie, że wynik jest taki sam. Vue w ogóle tej funkcji nie wykonał,

5:24co widzimy po tym, że ten console.log się nie wykonał. Natomiast gdybyśmy to mieli w methods i

5:28gdybyśmy tutaj wywoływali sobie full name, to

5:33widzimy console.log, ale kiedy coś zmienimy, czyli za

5:37każdym rerendering'iem, zobacz, full name jest wykonywany, widzimy

5:42że 5 razy się wykonało, a to nam pokazuje, że metody się wykonują za każdym rerendering'iem,

5:47a computed properties nie. Zatem teraz, kiedy korzystać

5:51z computed properties, a kiedy z method. Też dobre pytanie, wyobraź

5:55sobie, że chcielibyśmy albo wyświetlić datę albo na przykład wyświetlić jakąś losową liczbę. Gdybym stworzył

6:01sobie computed property. Okej, może to wrócimy tutaj

6:05do computed i gdybym stworzył computed property w której w ogóle bym nie

6:09korzystał z this, bo przecież nie muszę i nazwałbym ją na przykład random i powiedzmy

6:15chcę zwrócić randomowy string. Zrobimy return math random, to nam zwraca

6:21randomową liczbę, możemy ją zamienić na string o wartości szesnastkowej w ten sposób i

6:25jeszcze odciąć dwa pierwsze znaki, bo tam

6:29będzie znak na przykład zero kropka i tak dalej. Chce to odciąć i ten

6:33random sobie wyświetlimy tutaj zamiast age, w ten

6:39sposób. Sprawdzimy, taki ciąg został

6:43wygenerowany i teraz jeżeli coś zmienimy, tutaj, zobacz,

6:49że ten string w ogóle się nie zmienia, czyli jeżeli chciałbyś mieć computed property, która

6:53wykonuje jakiś kod i coś zwraca, która nie korzysta nigdzie wewnątrz z this, albo

6:58gdybyś tutaj zwracał aktualną datę, to ona nigdy nie zostanie podmieniona. Do

7:02takiego celu powinniśmy wykorzystać metodę, bo metoda jak zauważyłeś,

7:06za każdym razem jest wykonywana od nowa, więc oczywiście

7:10metodę trzeba wywołać, żeby nam się takie dziwne rzeczy nie

7:14pojawiały jak kod tej funkcji. No i teraz widzimy taki string,

7:18ale jeżeli coś zmienimy, okej tutaj dodajemy,

7:23powinno to być wywoływane od nowa, dlaczego tak się

7:27nie dzieje. Vue jest znowu na tyle inteligentny, że zauważyło, że age nigdzie

7:31nie jest w szablonie, więc jeżeli age się zmienia to nie trzeba go renderować, więc dodajmy

7:35sobie tutaj page, okej. Mamy

7:41age 32 i zmieńmy ten age i jak widzisz ten string nad

7:45wiekiem również się zmienia. Jeżeli byśmy teraz jeszcze, bo chcę Ci to

7:49udowodnić random wstawili tutaj i wywołali

7:53to tutaj jako właściwość, zmieniam

7:58age, a ten string nad nią się nie zmienia. Czyli to nam właśnie pokazuje

8:02to, że nie powinniśmy zwracać wyliczonych właściwości

8:06jakich rzeczy, które nie korzystają gdzieś z this, które nie odwołują

8:10się do danych zapisanych tutaj. Bo jeżeli tak będziemy robić to Vue nigdy tego nie podmieni

8:15i jeżeli chcemy tam mieć dane, które mają się zmieniać za każdym rerendering,

8:19to powinniśmy wstawiać je do tablicy, czy do obiektu methods, dlatego

8:24ja to wstawię tutaj na samym końcu. Okej, ten console.log również

8:28tutaj pozostaiwe i w zasadzie w tej lekcji to jest wszystko, czyli podsumowując, wyliczone

8:33właściwości pozwalają ci na to, aby zwrócić jakieś

8:37dane, ale skorzystać z tego tak jak w normalnej właściwości. Tutaj

8:41jeszcze powrócimy do takiego zapisu, czyli mamy full name, a to bazuje na

8:45dane, które są w tym miejscu, jeżeli się zmieni first name,

8:49oczywiście zostanie to od nowa wykonane i na stronie zostanie

8:53podmienione. Natomiast jeżeli się nie zmieni nigdy się drugi raz

8:57nie wykona ta funkcja dzięki temu może być naprawdę bardzo bardzo wydajnym

9:01rozwiązaniem dla twojej aplikacji internetowej. Natomiast jeżeli chcesz, żeby za

9:05każdym razem rerenderingiem coś pojawiało się od nowa, było od nowa wyliczane. Skorzystaj

9:10z metody, ale pamiętaj, że z metod korzysta się wywołując je tutaj parą

9:14nawiasów okrągłych.