Structuri profunde computerizate Vue

Când vine vorba de calculul tipurilor de date imbricate sau profunde, cum ar fi tablouri sau obiecte, Vue.js sau orice alt limbaj de programare nu detectează automat modificarea ierarhică a datelor. Cu toate acestea, știm cu toții că Vue.js oferă ceasul și proprietățile calculate pentru a efectua unele variabile de modificare. Dar când vine vorba de modificări de date imbricate, Vue.js nu detectează asta. Această postare va învăța să efectueze unele modificări urmărind datele imbricate ale matricelor sau obiectelor.

Înainte de a afla despre vizionarea datelor imbricate în Vue.js, să înțelegem mai întâi cum funcționează proprietatea ceasului?

Urmăriți proprietatea

Proprietatea de ceas este utilizată pentru a viziona o variabilă și permite utilizatorului să efectueze unele sarcini dorite la modificarea variabilei.

Exemplu: urmăriți o variabilă

De exemplu, la schimbarea unei variabile, vrem să consolăm ceva. Sintaxa pentru scrierea unui astfel de cod în Vue va merge astfel:

După scrierea codului de mai sus, pagina web ar fi așa.

Dacă facem clic pe buton, starea „boolVar” ar trebui să fie modificată datorită atributului buton pe clic, iar ceasul ar trebui să detecteze automat modificarea în „boolVar” și să afișeze șirul de mesaje pe consolă.

A funcționat perfect; pe consolă se afișează mesajul „Buton făcut clic”.

Dar, observatorul nu reușește să detecteze schimbarea și nu se declanșează atunci când vine vorba de vizionarea matricelor sau a obiectelor. Să vedem o demonstrație a acestui lucru.

Exemplu: Urmărirea unui obiect

Să presupunem că avem un obiect în componenta noastră și vrem să afișăm schimbarea care a avut loc în proprietatea obiectului. În exemplul dat mai jos, am creat un obiect cu numele „objVar”, care conține două perechi cheie-valoare, „articol” și „cantitate”. Am creat un buton în care adaug „1” la cantitatea etichetei șablon. În cele din urmă, urmăresc obiectul „objVar” din proprietatea ceasului și afișez un mesaj de consolă.

Acum, acest cod ar trebui să afișeze modificarea cantității obiectului. Dar, când executăm codul și facem clic pe butonul de pe pagina web:

Puteți vedea în gif-ul de mai sus; nu se întâmplă nimic în consolă.

Motivul din spatele acestui fapt este că privitorul nu se uită adânc în valorile obiectelor și aceasta este adevărata problemă pe care o vom rezolva acum.

Vue.js oferă proprietatea profundă pentru vizionarea profundă a valorilor obiectelor și matricelor. Sintaxa pentru utilizarea proprietății profunde și vizionarea datelor imbricate este după cum urmează:

În această sintaxă, am setat proprietatea deep la adevărat și am rearanjat funcția handler ().

Acum, după schimbarea codului, dacă reîncarcăm pagina web și facem clic pe butonul:

Aici puteți vedea că monitorul funcționează și afișează mesajul în consolă.

Concluzie

După ce ați citit acest post, urmăriți și calculați structuri de date adânci sau imbricate în Vue.js nu mai este dificil. Am învățat cum să urmărim schimbarea unei valori într-un obiect sau matrice și să executăm unele sarcini cu ajutorul proprietății „profunde” a Vue.js.