Vue.js: Instancja Vue z bliska

Vue.js 2.5.x

0:00W poprzedniej lekcji pokazałem ci jak działają w języku JavaScript gettery i settery

0:04i to powinno dać ci taki ogólny ogląd na to jak

0:08działa Vue.js, czyli, że potrafi z tego obiektu data wyciągnąć

0:12wszystkie klucze i przypisać je jako settery do głównej

0:16instancji, również jako gettery. Natomiast w tej lekcji będę chciał ci

0:20pokazać jeszcze troszeczkę więcej na temat samej instancji, czyli tego obiektu,

0:25który jest zwracany z wywołania new vue. Mamy tutaj new vue. Troszeczkę

0:31inaczej to zrobiłem, bo po raz pierwszy w data pojawia się u nas tablica items. Jest

0:36to normalna tablica, jak najbardziej poprawny tutaj zapis i możesz zobaczyć, że

0:40tutaj w wyrażeniu korzystam z items join, czyli z metody join

0:44na tablicy. To nam połączony na przecinku i spacji wszystkie elementy tej tablicy, więc tak

0:48to będzie wyglądać. Jest wszystko okej. Na tych tablicach jeszcze się

0:53za moment na chwilę zatrzymamy. Natomiast to co jest niesłychanie

0:57ważne, to w momencie kiedy jest tworzony obiekt, właśnie

1:01poprzez wywołanie new vue, to musi się coś znajdować w data,

1:05żeby to mogło być ustawione jako setter i getter w sposób, który pokazałem

1:10ci w lekcji poprzedniej, czyli mamy to items, zostało to ustawione, ale

1:14jeżeli tutaj chciałbym skorzystać sobie na przykład z powiedzmy

1:19name, a tutaj

1:24tego nie ma, Vue nam pokaże błąd i nie wystarczy teraz odwołać

1:28się do tego this czy to poprzez metodę czy poprzez na przykład

1:32vm0 i nie

1:36wystarczy tutaj dodać name, tak jakby nam się wydawało i nie zostanie

1:40to na stronie podmienione. Oczywiście to zostało dodane, ale to wynika z natury języka JavaScript. Pod vm0

1:46jest jakiś obiekt, a do obiektów po kropce możemy dowolnie dodawać co nam się tylko podoba,

1:50więc udało nam się to tutaj dodać. Oczywiście gdyby name

1:54istniał wcześniej i zrobiłbym taki zapis to wywołał by się setter i to name

1:58zostałoby zmienione i przerenderowany byłby widok. Natomiast, jeżeli to

2:02nie był setter, to zostało to dodane w ten sposób. Gdybyśmy zrobili console dir

2:06vm0 to zobaczymy

2:11tutaj, że mamy name, które dodałem, ale jest normalna

2:15właściwość, ona nie jest reaktywna w żaden sposób. Natomiast items, które

2:19sobie dodaliśmy, zobacz. Jest to dodane tutaj jako

2:23get i set, czyli console dir nam pokazuje, że na głównej instancji,

2:27chociaż my to dodaliśmy w data, zostało to dodane do głównej instancji jako getter i

2:31setter, więc dlatego to działa. Przy okazji, zauważ, że tutaj jest jeszcze kilka innych

2:35rzeczy. Te które są z podkreślnikiem są takie wewnętrzne rzeczy, które musimy traktować

2:40jako prywatne dane dla Vue. Nie powinniśmy tego w żaden sposób modyfikować,

2:44ale okazuje się, że tutaj jest troszeczkę rzeczy poprzedzonych dolarem

2:48i jeszcze coś z tych rzeczy zobaczymy w tym kursie. Okazuje się, że wszystko co jest z

2:52dolarem oznacza, że jest to metoda lub jakaś właściwość

2:56dodana przez Vue i jest to na tyle mądrze pomyślane, że

3:00skoro wszystko co my dodajemy w data jest proksowane do głównego obiektu, a

3:04twórca Vue chciałby mieć coś takiego jak this kropka attrs. No

3:08to my nie moglibyśmy wtedy tutaj korzystać z attrs, dlatego wszystko co jest

3:12specyficzne dla Vue jest poprzedzone dolarem i na przykład w metodach gdybyśmy

3:17tutaj gdzieś mieli metodę, to moglibyśmy napisać this attrs i tak

3:21dalej. Z części z tych rzeczy możemy i nawet powinniśmy w niektórych przypadkach korzystać,

3:25także rzeczy specyficzne dla Vue są poprzedzone dolarem, inne nasze

3:29dodane są jako gettery i settery tutaj przypisywane. Zatem zapamiętaj,

3:34że jeżeli chcesz z czegoś korzystać w templatce teraz lub później, dlatego

3:39że tutaj pewne rzeczy będą mogły być ładowane warunkowo, powinno to być już

3:43na początku dodane w data. Nawet jeżeli miałby to być jakiś pusty string. Drugą z

3:48rzeczy, którą chcę ci pokazać jest to, że Vue sobie opakowuje metody tablic. Bo

3:52o ile settery działają w ten sposób, że jeżeli coś przypiszemy po znaku

3:56równości to wywoła się nasza funkcja settera, o tyle jeżeli skorzystamy

4:01z jakieś metody na przykład na tablicy, to już tak nie będzie, aby ci powiedzieć czy

4:05pokazać o co mi chodzi, dodamy sobie metodę, którą

4:10nazwiemy na przykład swap array, czyli podmień tablicę i ona

4:16sprawi, że this items nadpiszemy nową tablicą

4:21i tam powiedzmy, że będzie tylko jedna rzecz. Na przykład

4:25mleko. Okej, czyli jeśli ją wywołamy, wszystko

4:30zostanie podmienione, a więc wywoła się setter, czyli this items równa się nowa

4:34tablica, wywoła się setter to się wszystko podmieni i tutaj powinno zostać również zmienione,

4:38więc możemy się odwołać tutaj do tego, chociaż widzimy,

4:42że jakiś pojawił się błąd. Tak to name powinniśmy tutaj usunąć. Okej,

4:47odwołamy się do tego naszego vm0 i następnie

4:53do swap array, wywołamy to, na stronie zostało to zmienione, czyli

4:57tutaj nie ma żadnych nowości, ale teraz pokażę ci ciekawszą rzecz, bo się okazuje, że jeśli

5:01się odwołamy do vm0 i następnie do items. Wiem,

5:06że to jest tablica i nie będę jej nadpisywał w ten sposób, czyli setter

5:10się nie wywoła, ale odwołam się do tej tablicy i dodam nowy element poprzez

5:14push. Na przykład woda. Zobacz,

5:18zostało to dodane do strony. To jest rzecz absolutnie kapitalna, jeżeli

5:22już będziemy później tworzyć aplikacje. Możemy mieć formularz, w którym użytkownik coś wpisze

5:27i dla nas tylko poprzez dodanie tego za pomocą push

5:31do tablicy, którą mamy w data, wszystko od nowa się na stronie wyrenderuje. Jeśli

5:35tutaj będzie pętla, o których się będziemy uczyć później zostanie dodany kolejny element. To

5:40jest genialne, że tutaj mamy tak zwany single source of truth. Wszystko, co jest tutaj,

5:44tylko tym manipulujemy. Wystarczy, że tutaj sobie coś dodam, strona

5:48musi zostać tutaj odświeżona. To wszystko musi zostać odzwierciedlone. Natomiast

5:52ja chciałbym ci tak troszeczkę z technicznego punktu widzenia to wytłumaczyć, no bo już

5:56ci pokazałem jak działają settery. Mógłbyś się zastanawiać, w takim razie, czy

6:00setter też się wywołuje kiedy na tablicy wykonamy metodę push. Okazuje

6:05się, że nie. Po prostu Vue wiedząc, na początku przy inicjalizacji,

6:09że items jest to tablica, opakowało sobie jej metody, czyli normalnie tablica

6:13ma metodę push. Vue zastępuje to swoją metodą push, która później

6:18wywoła oryginalną metodę żeby dodać coś do tablicy, ale przy okazji wywoła kod

6:22odpowiedzialny za analizę, czy trzeba przerenderować widok czy nie. No

6:26i teraz związku z tym pytanie. Jak myślisz jakie metody są te

6:30tutaj opakowane? Wrzucę to może w takim komentarzu metoda

6:35push, pop shift, unshift, splice, sort, reverse. Są to metody tablic

6:39dostępne we EcmaScript5. Metod jest jeszcze więcej, ale to są te

6:43które coś dodają do tablicy, modyfikując tą tablicę, bo mamy na przykład metodę filter

6:48czy map. One zwracają nową tablicę, stąd nie są tutaj opakowane, ale

6:52metody, które oryginalną tablice modyfikują zostały przez Vue opakowane, a więc z

6:56wszystkich tych metod możesz korzystać, gdzieś wewnątrz tutaj swojego

7:01kodu czyli moglibyśmy napisać na przykład add item i zrobilibyśmy

7:07powiedzmy this items push i tutaj

7:12zrobimy prompt do użytkownika. Podaj

7:16produkt, okej i znowu

7:20jeśli tę metodę wywołamy, czyli

7:24będzie to add item. Okej,

7:29znowu musimy tutaj zaznaczyć, jak widzisz, żeby nam to działało poprawnie. Wywoła nam się

7:33Podaj produkt i będziemy mogli napisać na przykład Pepsi. Dodajemy to

7:39do tablicy. Zostało odzwierciedlone na stronie, z wszystkich tych metod możesz bez problemu korzystać. Teraz

7:44powiem ci o jeszcze jednej kapitalnej rzeczy, która znowu wpływa świetnie na optymalizacje. Jeżeli

7:50nadpiszemy jedną tablicę inną tablicą, to Vue będzie potrafiło

7:54te tablice porównać, czyli jeżeli byśmy sobie zrobili filter lub map. Wiemy,

7:58że to zwraca nową tablicę. Powiedzmy, że tutaj będziemy chcieli zrobić

8:03filter items i

8:07powiedzmy, że this item

8:11nadpiszemy nową tablicą. To co zrobiłem wcześniej w metodzie swap, ale nowa tablica

8:15może być zwrócona z metody na przykład filter, czyli this items i powiedzmy,

8:19że chcemy odfiltrować. Tutaj będziemy mieli

8:23jeden element takiej tablicy, tylko te które powiedzmy zaczynają

8:28się na s, czyli return i zwrócimy true or false, właśnie

8:32z funkcji filtrującej. Jeżeli items.charAt 0, czyli

8:39pierwszy znak równa się powiedzmy duże s i chciałbym tutaj dodać

8:43sobie jeszcze coś, co będzie na duże S, czyli

8:47Szampan, na przykład i teraz

8:52spróbujemy sobie ją wywołać. Chyba znowu tutaj musimy kliknąć, znowu przejść w to miejsce

8:56i zamiast add item zrobimy filter. Tutaj

9:01moglibyśmy w zasadzie przekazywać parametr dynamicznie, ale to jest nieistotne. Okej,

9:05a items is not defined. Tutaj musi być oczywiście

9:09this, jeszcze raz kliknijmy, zróbmy

9:14to samo, okej charAt of undefined, czyli

9:18tutaj pojawił się jakiś błąd. Wychodzi na to,

9:22że metoda filter będzie otrzymywać najpierw index. Okej, nie,

9:27błąd. Przepraszam, nie tutaj this items tylko tutaj powinno być item,

9:32okej. To jedno przekazane w to miejsce, czyli jeden z tych stringów, więc spróbujmy

9:38raz jeszcze, okej i na stronie zostały tylko te,

9:42które mają s na początku. Natomiast po co ci to pokazuje, bo okazuje

9:47się, że Vue działa w taki sposób, że w momencie kiedy tablice, która tutaj

9:51była napisaliśmy nową, bo co ważne metoda filter zwraca zupełnie nową tablicę. Tutaj

9:55mógłbym ją przepisać ręcznie. Vue będzie miał setter, który się wywoła. W tym setterze sobie

10:00sprawdzi, że jest to tablica i porówna elementy tablicy i okaże się, że

10:04w nowo zwróconej tablicy dwa elementy są takie same, czyli

10:08sok oraz szampan. Dzięki temu w tym przypadku wszystko

10:13będzie renderowane od nowa, ale gdybyśmy tutaj mieli pętlę i w tej pętli byłby elementy

10:17li renderowane i w każdym li wyobraź sobie, że byłby osobny element

10:21to Vue będzie mogło zostawić 2 oryginalne elementy

10:25li, w których był sok i szampan, czyli potrafi Vue nawet porównać

10:29sobie dwie tablice. Jeśli jedną tablicę zastąpimy inną tablicą i te elementy, które

10:34się nie zmieniły, które pozostały, będą mogły na stronie być niezmienione, co

10:38jeszcze bardziej wpływa na wydajność właśnie tego rozwiązania.

10:43Okej, zatem to tyle w tej lekcji. Mam nadzieję, że przedstawiając ci Vue od troszeczkę innej

10:47strony, czyli takiej bardziej technicznej, jak to działa, będziesz mógł lepiej ten framework

10:51rozumieć, czyli zapamiętaj z tej lekcji tyle, że jeżeli z czegoś chcesz w templatce korzystać

10:55lub w metodach, powinno to być dodane od razu do data już na początku. Zapamiętaj, że Vue

10:59opakowuje nam metody tablic, takie jak są tutaj i dzięki

11:04temu jeśli z którejkolwiek skorzystamy jest odzwierciedlane na stronie, a jeżeli nadpiszemy

11:09tablice inną tablicą, to są porównywane elementy, żeby nie wszystko

11:13musiało być renderowane od nowa. Natomiast w związku z tym zapamiętaj jedną bardzo ważną

11:17rzecz. Jeżeli tutaj jeszcze raz sobie przejdziemy i odwołamy

11:21się do vm0 i następnie

11:26do items. Mamy tą tablicę, wiesz że jeśli skorzystamy z push to zadziała. Jeśli

11:30ją nadpisze nową tablicą, to zadziała. Ale jeśli bym zmienił jej długość,

11:34zmieniając na przykład length, w ten sposób, na 2, to Vue

11:39nie jest w stanie tego oddzielić, bo po prostu nie ma takiej technicznej możliwości w JavaScripcie,

11:44aby Vue się o tym dowiedział. Jest to możliwe w EcmaScript6,

11:48ale na przykład nie jest możliwe w ES5, na którym Vue bazuje. Podobnie

11:52jeżeli byśmy się odwołali do items i na przykład pod indeksem drugim chcieli coś dodać,

11:56powiedzmy Piotr, czyli będzie to trzeci element. Vue

12:00nam na stronie tego nie zmieni, bo on nie wie, że taka zmiana miała miejsce, więc o tym

12:04pamiętaj, dlatego powinniśmy albo nadpisywać całą tablicę albo

12:08korzystać z metod takich jak push, pop shift i tak dalej. Wtedy

12:13mamy pewność, że Vue dowie się o tych zmianach i będzie mógł je odzwierciedlić na stronie.