Vue arvutatud sügavad struktuurid

Pesastatud või sügavate andmetüüpide, näiteks massiivide või objektide arvutamiseks tuleb Vue.js või mõni muu programmeerimiskeel ei tuvasta andmete hierarhilist muutust automaatselt. Kuid me kõik teame seda Vue.js pakub vaatamise ja arvutatud omadused mõne muutuja muutuja sooritamiseks. Aga kui tegemist on pesastatud andmete muudatustega, siis Vue.js seda ei tuvasta. Selles postituses õpitakse massiivide või objektide pesastatud andmeid vaadates tegema mõningaid muudatusi.

Enne Vue pesastatud andmete vaatamist.js, mõistame kõigepealt, kuidas kella vara töötab?

Vaata vara

Vaatamisomadust kasutatakse muutuja vaatamiseks ja see võimaldab kasutajal muutuja muutumisel sooritada soovitud toiminguid.

Näide: vaadake muutujat

Näiteks tahame mõne muutuja muutumisel midagi lohutada. Sellise koodi Vue kirjutamise süntaks läheb järgmiselt:

Pärast ülaltoodud koodi kirjutamist oleks veebileht selline.

Kui klõpsame nupul, peaks nupu klõpsamise atribuudi tõttu muutuma oleku „boolVar” olek ja kell peaks automaatselt tuvastama „boolVari” muutuse ning kuvama konsoolis sõnumistringi.

See töötas täiesti hästi; konsoolil kuvatakse teade "Nupul klõpsatud".

Kuid jälgija ei suuda muutust tuvastada ja massiivide või objektide vaatamisel ei vallandata. Vaatame selle demonstratsiooni.

Näide: objekti vaatamine

Oletame, et meie komponendis on objekt ja me tahame kuvada objekti atribuudis toimunud muutuse. Allpool toodud näites olen loonud objekti nimega "objVar", mis sisaldab kahte võtmeväärtuste paari "element" ja "kogus". Olen loonud nupu, kuhu lisan mallimärgise kogusele „1”. Lõpuks vaatan kella omaduses objekti „objVar” ja kuvan konsoolisõnumit.

Nüüd peaks see kood näitama objekti koguse muutust. Kuid kui täidame koodi ja klõpsame veebilehel nuppu:

Näete ülaltoodud gifis; konsoolis midagi ei toimu.

Selle põhjuseks on see, et jälgija ei vaata objektide väärtustesse sügavuti ja see on tegelik probleem, millele me nüüd lahenduse otsime.

Vue.js pakub sügavat omadust objektide ja massiivide väärtuste jälgimiseks. Sügav atribuudi kasutamise ja pesastatud andmete vaatamise süntaks on järgmine:

Selles süntaksis oleme seadnud sügava omaduse väärtuseks Tõene ja korraldanud ümber käitleja () funktsiooni.

Nüüd, pärast koodi muutmist, laadime veebilehe uuesti ja klõpsame nuppu:

Siin näete, et jälgija töötab ja kuvab sõnumit konsoolis.

Järeldus

Pärast selle postituse lugemist vaadake ja arvutage Vue sügavaid või pesastatud andmestruktuure.js pole enam keeruline. Oleme õppinud, kuidas jälgida objekti või massiivi väärtuse muutumist ja täita mõningaid ülesandeid Vue „sügava” omaduse abil.js.