Vue ha calcolato le strutture profonde

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 le proprietà dell'orologio e calcolate per eseguire alcune variabili di modifica. Ma quando si tratta di cambiamenti di dati nidificati, Vue.JS non lo rileva. Questo post imparerà a eseguire alcune modifiche osservando i dati nidificati di array o oggetti.

Prima di conoscere la visione dei dati nidificati in VUE.JS, capiamo prima come funziona la proprietà dell'orologio?

Guarda la proprietà

La proprietà dell'orologio 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 una variabile, vogliamo consolare qualcosa. La sintassi per la scrittura di tale codice in Vue andrà così:

Dopo aver scritto il codice sopra, la pagina Web sarebbe così.

Se facciamo clic sul pulsante, lo stato del "boolvar" dovrebbe essere modificato a causa dell'attributo di on-click del pulsante e l'orologio dovrebbe rilevare automaticamente la modifica in "boolvar" e visualizzare la stringa di messaggi sulla console.

Ha funzionato perfettamente bene; Il messaggio "Pulsante cliccato" viene visualizzato sulla console.

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 questo.

Esempio: guardare un oggetto

Supponiamo di avere un oggetto nel nostro componente e vogliamo visualizzare la modifica avvenuta nella proprietà dell'oggetto. Nell'esempio indicato di seguito, ho creato un oggetto con il nome di "Objvar", che contiene due coppie di valore chiave, "elemento" e "quantità". Ho creato un pulsante in cui sto aggiungendo "1" alla quantità del tag modello. Infine, sto guardando l'oggetto "objvar" nella proprietà dell'orologio e visualizzando un messaggio di console.

Ora, questo codice dovrebbe visualizzare la modifica della quantità dell'oggetto. Ma quando eseguiamo il codice e facciamo clic sul pulsante sulla pagina Web:

Puoi vedere nella gif sopra; Nulla sta accadendo nella console.

Il motivo alla base di questo è che l'osservatore non guarda in profondità nei valori degli oggetti, e questo è il vero problema a cui risolveremo ora.

Vue.JS fornisce la proprietà profonda per guardare in profondità nei valori di oggetti e array. La sintassi per l'utilizzo della proprietà profonda e la visione dei dati nidificati è la seguente:

In questa sintassi, abbiamo impostato la proprietà profonda su vera e riorganizzata la funzione gestore ().

Ora, dopo aver modificato il codice, se ricariamo la pagina Web e facciamo clic sul pulsante:

Qui puoi vedere che l'osservatore sta lavorando e visualizzando 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 a guardare il cambio di un valore in un oggetto o un array ed eseguire alcuni compiti con l'aiuto della proprietà "profonda" di Vue.js.