Pristup svojstvima u okviru same Vue instance

Unutar Vue.js instance ključna reč “this” ukazuje na instancu vue.js objekta. Stoga se za pristup svojstvima instance koristi rezervisana reč “this”, na koju se nadovezuje naziv željenog svojstva:

Treba napomenuti da su odredjena svojstva vue instance specifična, jer se kod njih odvija dodatna “magija u pozadini”. Svojstva data, methods, computed i watch se ponašaju kao “proxy za vue instancu”, pa sva svojstva unutar njih se direktno prosledjuju vue instanci. Zbog toga sva child svojstva ovih navedenih svojstava se predstavljaju kao da su direktna svojstva Vue instance.

Primer

Zahvaljujući ovoj “magiji”, kod tergetiranja child svojstava unutar tih specifinih svojstava, pristupamo im kao da su “glavna” svojstva. Tako da ne moramo da koristimo “this.data.nekoSvojstvo”, već možemo da koristimo samo “this.nekoSvojstvo”.

U ovome primeru umesto da koristimo this.data.message izraz, mi koristimo this.message kao sasvim legitiman način.

Problematični slučajevi pri korišćenju “this” (za: data, methods, computed i watch)

a) Arrow funkcija

Child svojstva u okviru ovih “specijalni” svojstava (data, methods, computed i watch), upravo zbog “magije” u pozadini ne bi trebalo da koriste arrow funkciju jer ona koristi leksički “this” tj. koristi “this” od roditeljskog okruženja pa bi u tom slučaju vraćao “undefined”. Više o arrow funkciji možete pročitati u članku “Arrow funkcija”

b) Closure

Ukoliko clousure funkciju poziva spoljna funkcija, onda se pri odredjivanju vrednosti ključne reči “this” koristi “podrazumevano pravilo” (pročitaj više o ovome u članku “Značenje operatora “this” u JavaScript-u”). Iz pomenutog razloga ključna reč “this” u okviru closure ukazuje na globalni objekat.

Primer

U ovome primeru this.message ne vraća očekivanu vrednost već “undefined” jer globalni objekat nema svojstvo “message”

Za rešenje ovog problema možemo koristi poznatu tehniku var self = this;, gde u okviru nove variable van closure funkcije sačuvamo vrednost this (closure ima uvek pristup ovoj promenjivoj). Više o ovome mehanizmu pročitajte u sekciji “Mehanizam self=this”

See the Pen Closure unutar Vue.js by Web programiranje (@chos) on CodePen.

Pristup svojstvima izvan instance

Svojstvima Vue instance (kao i child svojstvima i metodama) se može jednostavno pristupiti izvan same instance tek nakon što se vue instanca dodeli nekoj promenjivoj. Za spoljašnji pristup vue.js predefinisanim svojstvima je potrebno koristiti prefiks “$”.

Primer

U ovom primeru pristupamo vue instanci izvan nje koristeći $ znak ispred naziva svojstva.

NAPOMENA:
Pošto je moguće da postoje više Vue instanci, koristeći pomenutu sintaksu možemo da koristimp svojstva iz jedne instance u drugoj. Medjutim iako postoji mogućnost da koristimo ovakav pristup, to ipak nije preporučljivo, jer njegova primena može brzo dovesti do koda koji je teško održavati. Takodje ne treba zanemariti činjeicu da Vue instance neće viće biti izolovane jedna od druge, zbog čega može biti teško praćenje zavisnost između njih, pa promena nečega u jednoj Vue instanci može lako da napravi problem drugoj.

Primer

See the Pen
Pristup instanci
by Web programiranje (@chos)
on CodePen.


Podelite:

Ostavite komentar