Vue számított mély szerkezetek

A beágyazott vagy mély adattípusok, például tömbök vagy objektumok kiszámításakor a Vue.A js vagy bármely más programozási nyelv nem észleli automatikusan az adatok hierarchikus változását. Azonban mindannyian ismerjük azt a Vue-t.A js biztosítja az órát és a számított tulajdonságokat néhány változó végrehajtásához. De amikor beágyazott adatok változnak, Vue.js ezt nem érzékeli. Ez a bejegyzés megtanul néhány változtatást végrehajtani tömbök vagy objektumok beágyazott adatainak megtekintésével.

Mielőtt megtudná a beágyazott adatok megtekintését a Vue-ban.js, először értsük meg, hogyan működik az óra tulajdonság?

Watch Property

A watch tulajdonság egy változó figyelésére szolgál, és lehetővé teszi a felhasználó számára, hogy a változó változásával elvégezzen néhány kívánt feladatot.

Példa: Nézzen meg egy változót

Például valamely változó változásakor vigasztalni akarunk valamit. Az ilyen kód Vue-ba történő írásának szintaxisa a következő lesz:

A fenti kód megírása után a weboldal ilyen lenne.

Ha rákattintunk a gombra, a „boolVar” állapotát meg kell változtatni a gomb on-click attribútuma miatt, és az órának automatikusan észlelnie kell a „boolVar” változását, és meg kell jelenítenie az üzenet karakterláncát a konzolon.

Teljesen jól működött; a „Gomb kattintva” üzenet jelenik meg a konzolon.

De a figyelő nem érzékeli a változást, és nem lő ki, amikor a tömböket vagy tárgyakat figyeli. Lássuk ennek bemutatóját.

Példa: Objektum nézése

Tegyük fel, hogy van egy objektum az összetevőnkben, és meg akarjuk jeleníteni az objektum tulajdonságában bekövetkezett változást. Az alábbi példában létrehoztam egy objektumot „objVar” névvel, amely két kulcsérték-párot tartalmaz: „item” és „mennyiség”. Hoztam létre egy gombot, ahol az „1” -t hozzáadom a sabloncímke mennyiségéhez. Végül figyelem az „objVar” objektumot az óra tulajdonságban, és egy konzol üzenetet jelenítek meg.

Ez a kód állítólag az objektum mennyiségének változását jeleníti meg. De amikor végrehajtjuk a kódot, és rákattintunk a weboldalon található gombra:

A fenti gif-ben láthatja; semmi nem történik a konzolban.

Ennek oka az, hogy a figyelő nem nézi mélyen a tárgyak értékeit, és ez az igazi probléma, amelyet most meg fogunk oldani.

Vue.A js biztosítja a mély tulajdonságot az objektumok és tömbök mélyén történő megfigyeléshez. A mély tulajdonság használatának és a beágyazott adatok megtekintésének szintaxisa a következő:

Ebben a szintaxisban a mély tulajdonságot igazra állítottuk, és átrendeztük a handler () függvényt.

Most, miután megváltoztattuk a kódot, ha újratöltjük a weboldalt, és rákattintunk a gombra:

Itt láthatja, hogy a figyelő dolgozik, és megjeleníti az üzenetet a konzolon.

Következtetés

A bejegyzés elolvasása után mély vagy beágyazott adatstruktúrák megtekintése és kiszámítása a Vue-ban.js már nem nehéz. Megtanultuk, hogyan kell figyelni egy objektum vagy tömb értékének változását és végrehajtani néhány feladatot a Vue „mély” tulajdonságának segítségével.js.