Vue vypočítané hlboké štruktúry

Pokiaľ ide o výpočet vnorených alebo hlbokých dátových typov, ako sú polia alebo objekty, Vue.js alebo akýkoľvek iný programovací jazyk nedetekuje automaticky hierarchickú zmenu údajov. Všetci však vieme, že Vue.js poskytuje hodinky a vypočítané vlastnosti na vykonávanie niektorých premenných zmien. Ale pokiaľ ide o zmeny vnorených údajov, Vue.js to nezistí. Tento príspevok sa naučí vykonávať niektoré zmeny sledovaním vnorených údajov polí alebo objektov.

Predtým, ako sa dozviete o sledovaní vnorených údajov vo Vue.js, najskôr pochopíme, ako funguje vlastnosť watch?

Sledujte nehnuteľnosť

Vlastnosť watch sa používa na sledovanie premennej a umožňuje používateľovi vykonať pri zmene premennej niektoré požadované úlohy.

Príklad: Sledujte premennú

Napríklad pri zmene nejakej premennej chceme niečo utíšiť. Syntax pre zápis takéhoto kódu do programu Vue bude nasledovná:

Po napísaní vyššie uvedeného kódu bude webová stránka vyzerať takto.

Ak klikneme na tlačidlo, stav „boolVar“ by sa mal zmeniť kvôli atribútu kliknutia na tlačidlo a hodinky by mali automaticky zistiť zmenu v „boolVar“ a zobraziť reťazec správy na konzole.

Fungovalo to úplne v poriadku; na konzole sa zobrazí správa „Kliknutie na tlačidlo“.

Pozorovateľ však nedokáže zistiť zmenu a pri sledovaní polí alebo objektov ho nevyhodia. Pozrime sa na ukážku toho.

Príklad: Pozeranie objektu

Predpokladajme, že v našej súčasti máme objekt a chceme zobraziť zmenu, ktorá sa stala vo vlastnosti objektu. V príklade uvedenom nižšie som vytvoril objekt s názvom „objVar“, ktorý obsahuje dva páry kľúč - hodnota, „item“ a „quantity“. Vytvoril som tlačidlo, kde pridávam „1“ k množstvu značky šablóny. Nakoniec sledujem objekt „objVar“ vo vlastnosti watch a zobrazujem správu z konzoly.

Teraz má tento kód zobrazovať zmenu množstva objektu. Keď však vykonáme kód a klikneme na tlačidlo na webovej stránke:

Môžete vidieť vo vyššie uvedenom gife; v konzole sa nič nedeje.

Dôvodom je to, že pozorovateľ sa nepozerá hlboko do hodnôt objektov, a to je skutočný problém, ktorý teraz budeme riešiť.

Vue.js poskytuje vlastnosť deep na sledovanie hlboko do hodnôt objektov a polí. Syntax pre použitie vlastnosti deep a sledovanie vnorených údajov je nasledovná:

V tejto syntaxi sme nastavili vlastnosť deep na true a usporiadali sme funkciu handler ().

Po zmene kódu teraz znova načítame webovú stránku a klikneme na tlačidlo:

Tu vidíte, že pozorovateľ pracuje a zobrazuje správu v konzole.

Záver

Po prečítaní tohto príspevku sledovanie a výpočet hlbokých alebo vnorených dátových štruktúr vo Vue.js už nie je ťažké. Naučili sme sa, ako sledovať zmenu hodnoty v objekte alebo poli a vykonávať niektoré úlohy pomocou „hlbokej“ vlastnosti Vue.js.