Vue vypočítané hluboké struktury

Pokud jde o výpočet vnořených nebo hlubokých datových typů, jako jsou pole nebo objekty, Vue.js nebo jakýkoli jiný programovací jazyk automaticky nezjistí hierarchickou změnu v datech. Všichni však víme, že Vue.js poskytuje hodinky a vypočítané vlastnosti k provádění některých proměnných změn. Ale pokud jde o vnořené změny dat, Vue.js to nezjistí. Tento příspěvek se naučí provádět některé změny sledováním vnořených dat polí nebo objektů.

Než se dozvíte o sledování vnořených dat ve Vue.js, pojďme nejprve pochopit, jak vlastnost watch funguje?

Sledujte nemovitost

Vlastnost watch se používá ke sledování proměnné a umožňuje uživateli provádět některé požadované úkoly při změně proměnné.

Příklad: Sledujte proměnnou

Například při změně nějaké proměnné chceme něco utěšit. Syntaxe pro psaní takového kódu ve Vue bude vypadat takto:

Po napsání výše uvedeného kódu bude webová stránka vypadat takto.

Pokud klikneme na tlačítko, měl by být stav „boolVar“ změněn kvůli atributu kliknutí na tlačítko a hodinky by měly automaticky detekovat změnu „boolVar“ a zobrazit řetězec zprávy na konzole.

Fungovalo to naprosto dobře; na konzole se zobrazí zpráva „Kliknuto na tlačítko“.

Pozorovatel však nezjistí změnu a při sledování polí nebo objektů ho nevyhodí. Podívejme se na to.

Příklad: Sledování objektu

Předpokládejme, že máme objekt v naší komponentě a chceme zobrazit změnu, která se stala ve vlastnosti objektu. V níže uvedeném příkladu jsem vytvořil objekt s názvem „objVar“, který obsahuje dva páry klíč – hodnota, „item“ a „quantity“. Vytvořil jsem tlačítko, kde přidávám „1“ k množství značky šablony. Nakonec sleduji objekt „objVar“ ve vlastnosti watch a zobrazuji zprávu konzoly.

Nyní má tento kód zobrazit změnu v množství objektu. Když však spustíme kód a klikneme na tlačítko na webové stránce:

Můžete vidět ve výše uvedeném gifu; v konzole se nic neděje.

Důvodem je to, že pozorovatel se nedívá hlouběji do hodnot objektů, a to je skutečný problém, který nyní vyřešíme.

Vue.js poskytuje vlastnost deep pro sledování hloubky do hodnot objektů a polí. Syntaxe pro použití vlastnosti deep a sledování vnořených dat je následující:

V této syntaxi jsme nastavili vlastnost deep na true a přeskupili jsme funkci handler ().

Nyní, po změně kódu, pokud znovu načteme webovou stránku a klikneme na tlačítko:

Zde vidíte, že pozorovatel pracuje a zobrazuje zprávu v konzole.

Závěr

Po přečtení tohoto příspěvku sledování a výpočet hlubokých nebo vnořených datových struktur ve Vue.js už není obtížné. Naučili jsme se, jak sledovat změnu hodnoty v objektu nebo poli a provádět některé úkoly pomocí vlastnosti „deep“ Vue.js.