methods

Svojstva u okviru Methods su funkcije vezane za Vue instancu. “Metode” se koriste kada želite da se nešto izvrši nakon nekog događaja ili kada želite da se funkcija izvrši kada god se promeni stanje instance/komponente nakon čega se DOM re-renderuje. “Metode” se takodje izvršavaju pri svakom učitavanju instance (komponente).

When this data changes, the view will re-render. Method invocation will always run the function whenever a re-render happens.
Dokumentacija Vue.js

Ovakvo ponašanje metoda je omogućeno time što Vue.js ne vodi računa šta se nalazi u okviru metode pa će metoda, biti ponovo proračunata čak iako promena ne utiče na metodu.

Primer

methods

U ovome primeru imamo dve metode (“obavestenje()” i “ispisiVrednostB()”) čije su funkcionalnost jednostavne i opisane samim nazivom metode. Medjutim funkcionalnost koja je važna u ovome primeru je ispisivanje poruke u konzoli svaki put kada se klikne bilo koje dugme.
Kao prva stvar na koju treba obratiti pažnju je činjenica da se odmah nakon učitavanja Vue instance u konzoli ispisuju poruke iz obe metode, što potvrdjuje činjenicu da se metode izvršavaju pri svakom učitavanju Vue instance (komponente).
Zatim treba pratiti konzolu nakon svakog klika na akciono dugme, jer se nakon svakog klika ispisuju po dve nove poruke, bez obzira koje dugme je kliknuto. Ovo ukazuje da se obe metode izvršavaju svaki put kada se re-renderuje DOM nakon promene nekog od data svojstava, pa čak i metoda na koju promena data svojstva ne utiče.

See the Pen Specifičnost metoda u Vue.js by Web programiranje (@chos) on CodePen.

Zaključak:

Stoga zbog svega pomenutog treba naglasiti da u slučaju čestog ažuriranja user interfejsa, može doći do problema sa preformansama aplikacije, jer se troše resursi pri ponovnom pokretanja svih metoda. Na primer, ako imamo aplikaciju koja prikazuje tajmer koji se ažurira posle svake sekund, sve funkcije u okviu “methods” objekta će biti pozivane za izvršenje posle svake sekunde, i ponovno izračunati bez obzira na to koja im je namena. U ovakvom slučaju je preporuka koristi computed properties.

computed

“Computed” svojstva su veoma korisne za manipulisanje već postojećim podacima, i uvek moraju da vrate vrednost, tako da ime takve funkcije postaje svojstvo koje zatim možemo da koristimo u aplikaciji, isto kao što koristimo “data” svojstvo. U suštini, “computed” svojstva su varijable, čije vrednosti zavise od drugih faktora i neće se ponovno izračunavati ako se zavisnosti ne promene. Što implicira da će funkcija iskoristiti svoju već prethodno izračunatu (tzv.kaširanu) vrednost, dok god nema promene zavisnosti.
Computed svojstva nisu namenjene za memorisanje podataka, štaviše, ako “computed” svojstvo vraća objekat, to će uvek biti novi objekat, a ne modifikovana verzija prethodnog. “Computed” svojstva moraju da budu funkcije čije akcije moraju da budu sinhrone i ne bi trebalo da imaju sporedne efekte.

Kada koristiti Computed properties?

Funkcije unutar “computed” svojstva se koriste kad god imamo neke podatke sa kojima trebamo da manipulišemo, da se transformišu, filtriraju, a pre nego što ih iskoristimo u template. Koristite “computed” svojstva kada želite da mutirate svojstvo koje zavisi od promene drugog svojstva koja se menja. “Computed” svojstva treba koristiti kao zamenu za inline izraze u okviru template kada imamo složeniju logiku.

Neki od primera zadataka koji su dobri kandidati za korišćenje “computed” svojstava su:

  • Ažuriranje velike količine informacija dok korisnik piše, kao što je filtriranje liste
  • Prikupljanje informacija iz “Vuex store”
  • Validacija forme
  • Vizualizacije podataka koje se menjaju u zavisnosti od toga šta korisnik treba da vidi
Primer

U ovom primeru je prikazano korišćenje “computed” svojstva za veliki set operacija:

Sada rezultat ovih “teških” proračuna možemo koristiti iznova i iznova u okviru drugih operacija bez bojazni da će se ponovo proračunavati ako nema potrebe (tj. ako se nisu promenile :

Da li koristiti “computed” ili “methods” svojstvo?

Ovu dilemu ću pokušati da objasnim kroz primer u kome iako koristimo različita svojstva dobijamo istu krajnju funkcoionalnost.



Krajnji rezultat je jednak, ali to ne znači da razlika ne postoji. Funkcija unutar “methods” će se izvršiti svaki put kada se renderuje stranica tj. pri svakoj mogućoj promeni DOM-a (ne samo promena svojstva “messages”), dok pri korišćenju computed svojstva Vue pamti vrednost svojstva od koje computed svojstvo zavisi (messages) i proračunava computed svojstvo samo ako se “dependency” promeni, u svakom drugom slučaju vraća keširanu vrednost.

Zaključujemo:
ako logika naše aplikacije ima “teške” proračune, a ne zahteva ponovno proračunavanje svojstva pri svakom renederovanju stranice, treba koristi “computed” svojstvo (jer dobijamo na perfomansama zbog keširanja). Medjutim ako logika zahteva ponovni proračun pri svakom renderovanju stranice tj. pri bilo kakvoj promeni (ne samo promeni zavisnosti), onda koristite koristite “methods”.

NAPOMENA:
Ako se computed svojstvo koristi u okviru duplih vitičastih zagrada tj. ako se izvršava interpolacija JavaScript izraza, onda se samo navodi naziv “computed” svojstva (bez zagrada koje označavaju pozivanje i izvršavanje funkcije)
npr. {{ nekoComputedSvojstvo }}
Ovo je još jedna sličnost sa “data” svojstvom jer “computed” svojstvo uvek vraća neku vrednost, stoga praktično mi očekujemo da se na mestu interpolacije štampa ta pripremljena (keširana) vrednost.

watch

Svojstvo “watch” pruža dodatni nivo kontrole, i omogućavaju nam da pratimo promene u modelu (data). Funkcije unutar “watch” objekta se aktiviraju samo kada se promeni određeno svojstvo u okviru data objekta. Treba naglasiti da “watched” svojstvo može da prati promene samo na jednom svojstvu

NAPOMENA:
Naziv watchera mora biti isti kao naziv data svojstva čiju promenu prati. Kroz parametar watch funkcije se prosledjuje promenjena vrednost data svojstva koju “nadgledamo”

Deep watch

Da bi smo pratili nestovana (ugnježdena) svojstva nekog objekta, potrebno je da definišemo vrednost parametra “deep” na “true”:

Kada koristiti watch svojstvo?

watch

“Watch” svojstva su specifičnija od computed svojstava i samim tim im je uže polje delovanja pa se i redje koriste. Koristite ih kada je potrebno da izvršite neku logiku nakon promene odredjenog child svojstva u okviru “data” objeka, pri čemu je željana akcija:

  • asihrona operacija
  • proračun tzv. medjurezultata
  • dodatno smanjivanje broja aktiviranja odredjenih operacija (npr. debounce nad input dogadjajem)

Pored pomenutih slučajeva možemo primeniti watch i za mnoge druge funkcionalnosti ali to treba dobro proceniti, jer iako je izvršavanje neke funkcionalnost sa “watch” svojstvom izvodljivo, to ne znači da je i preporučljivo, jer može biti komplikovanije nego da koristimo “computed” svojstvo. Zaključak je da “watch” svojstvo treba koristiti tek kada “computed” svojstva ne mogu rešiti vaš problem.

Primer

U ovome primeru je prikazana situacija kada problem ne možemo da rešimo sa “computed” svojstvom. Jedan od razloga za korišćenje “watch” svojstva u ovome primeru je izvršavanje asihrone operacije unutar nje, a drugi je definisanje medjurezulta (answer), dok se ne dobije finalni odgovor. Ni jedan od ovih zadataka ne bi mogao da se uradi sa “computed” svojstvom.

Primer

U ovome primeru koristimo svojstvo “searchQuery” sa kojim pratimo promenu istoimenog data svojstva, nakon čega upućujemo asinhroni zahtev serveru:

See the Pen Watch svojstvo za asinhroni zahtev serveru by Web programiranje (@chos) on CodePen.

Primena kroz primer

Kroz ovaj primer ću pokušati da objasnim primenu svakog od ovih važnih svojstava.

a) methods sekcija

Funkcija “numRenders” iz “methods” sekcije će biti pozvana sa svakim rerenderom. Dakle, kad god se bilo šta ažurira na UI-u, poziva se funkcija “numRenders”.

b) computed sekcija

U “computed” sekciji će welcomeMessage će se pozvati samo kada se promeni “message” ili “name”, jer zavisi od te dve stvari. Dakle, ako se promeni bilo koja od drugih promenjivih kao što je “nameEdits”, “welcomeMessage” naša funkcija u “computed” sekciji neće biti ponovo pozvana, jer ne zavisi od njih.

c) watch sekcija

Funkcija “name” u “watch” sekciji prati samo promene vrednosti “name” iz “data” objekta. To znači da kad god se promeni “name”, pozove se naša funkcija koja ažurira i menja vrednost “nameEdits”. Ako se promeni bilo koja od drugih promenjivih iz “data” objekta “nameEdits” ili “message” naša funkcija u neće biti ponovo pozvana, jer njih ne prati.

Pogledajte slične članke...

Podelite:

4 Responses to “Svojstva Vue instance: methods, computed i watch”

  1. Stepy

    Odlicno ljudi, hvala vam! Ja neko vreme vec pomalo uci vue.js i ovo mi je sad da kazem jednostavno, al bilo bi mi lakse da sam na pocetku imao vasa objasnjenja.

  2. Janko

    Kao prvo, stvarno odlican sajt!
    Drugo, krivo su opisane methods, one se ne izvrsavaju svaki put kad se promjeni DOM ili komponenta ucita. To su obicne metode koje imaju pristup this Vue instanci a pozivaju se kad ih netko izricito pozove.

    • chos

      Hvala Janko na komentaru, baš mi znači. Moram da priznam da sam imao dosta nedoumica kada sam proučavo kako Vue.js tretira metode, jer je dokumentacija o metodama oskudna. Ali čitajući dokumentaciju izmedju redova i na osnovu drugih članaka u vezi sa Vue.js sam došao do zaključka da se u nekim slučajevima metode stvarno izvršavaju češće nego što izgleda na prvi pogled. Dao si mi podstrek da još jednom prodjem kroz ovu tematiku i ipak malo bolje objasnim na šta sam mislio i to potkrepim jednim primerom.
      Veliki pozdrav

Ostavite komentar