Phenquestions
Quando si tratta del calcolo di tipi di dati nidificati o profondi come array o oggetti, Vue.js o qualsiasi altro linguaggio di programmazione non rileva automaticamente il cambiamento gerarchico nei dati. Tuttavia, sappiamo tutti che Vue.js fornisce l'orologio e le proprietà calcolate per eseguire alcune variabili di modifica. Ma quando si tratta di modifiche ai dati nidificati, Vue.js non lo rileva. Questo post imparerà a eseguire alcune modifiche osservando i dati nidificati di array o oggetti.
Prima di imparare a guardare i dati nidificati in Vue.js, capiamo prima come funziona la proprietà watch?
Guarda la proprietà
La proprietà watch viene utilizzata per guardare una variabile e consente all'utente di eseguire alcune attività desiderate sulla modifica della variabile.
Esempio: guarda una variabile
Ad esempio, al cambio di qualche variabile, vogliamo consolare qualcosa. La sintassi per scrivere tale codice in Vue sarà la seguente:
Questa è una pagina di test
Dopo aver scritto il codice sopra, la pagina web sarebbe così.
Se facciamo clic sul pulsante, lo stato di "boolVar" dovrebbe essere alterato a causa dell'attributo al clic del pulsante e l'orologio dovrebbe rilevare automaticamente il cambiamento in "boolVar" e visualizzare la stringa di messaggio sulla console.
Ha funzionato perfettamente bene; sulla console viene visualizzato il messaggio “Pulsante premuto”.
Ma l'osservatore non riesce a rilevare il cambiamento e non viene licenziato quando si tratta di guardare gli array o gli oggetti. Vediamo una dimostrazione di ciò.
Esempio: guardare un oggetto
Supponiamo di avere un oggetto nel nostro componente e di voler visualizzare il cambiamento avvenuto nella proprietà dell'oggetto. Nell'esempio riportato di seguito, ho creato un oggetto con il nome di "objVar", che contiene due coppie chiave-valore, "elemento" e "quantità". Ho creato un pulsante in cui aggiungo "1" alla quantità del tag del modello. Infine, sto guardando l'oggetto "objVar" nella proprietà watch e visualizzo un messaggio della console.
Questa è una pagina di test
Ora, questo codice dovrebbe visualizzare la variazione della quantità dell'oggetto. Ma, quando eseguiamo il codice e facciamo clic sul pulsante nella pagina web:
Puoi vedere nella gif sopra; non sta succedendo niente nella console.
La ragione di questo è che l'osservatore non guarda in profondità i valori degli oggetti, e questo è il vero problema a cui andremo a risolvere ora.
Vue.js fornisce la proprietà deep per guardare in profondità i valori di oggetti e array. La sintassi per utilizzare la proprietà deep e guardare i dati nidificati è la seguente:
In questa sintassi, abbiamo impostato la proprietà deep su true e riorganizzato la funzione handler().
Ora, dopo aver modificato il codice, se ricarichiamo la pagina web e clicchiamo sul pulsante:
Qui puoi vedere che l'osservatore funziona e visualizza il messaggio nella console.
Conclusione
Dopo aver letto questo post, guardando e calcolando strutture di dati profonde o nidificate in Vue.js non è più difficile. Abbiamo imparato come osservare il cambiamento di un valore in un oggetto o array ed eseguire alcune attività con l'aiuto della proprietà "deep" di Vue.js.
