Obliczone głębokie struktury Vue

Jeśli chodzi o obliczanie zagnieżdżonych lub głębokich typów danych, takich jak tablice lub obiekty, Vue.js lub jakikolwiek inny język programowania nie wykrywa automatycznie hierarchicznej zmiany danych. Jednak wszyscy wiemy, że Vue.js zapewnia obserwację i obliczone właściwości, aby wykonać niektóre zmienne zmiany. Ale jeśli chodzi o zagnieżdżone zmiany danych, Vue.js tego nie wykrywa. W tym poście nauczymy się wykonywać pewne zmiany, obserwując zagnieżdżone dane tablic lub obiektów.

Zanim dowiesz się o oglądaniu zagnieżdżonych danych w Vue.js, najpierw zrozummy, jak działa właściwość watch?

Oglądaj nieruchomości

Właściwość watch służy do obserwowania zmiennej i pozwala użytkownikowi na wykonanie pewnych pożądanych zadań na zmianie zmiennej.

Przykład: Obserwuj zmienną

Na przykład przy zmianie jakiejś zmiennej chcemy coś pocieszyć. Składnia do pisania takiego kodu w Vue będzie wyglądać tak:

Po napisaniu powyższego kodu strona internetowa wyglądałaby tak.

Jeśli klikniemy przycisk, stan „boolVar” powinien zostać zmieniony ze względu na atrybut przycisku on-click, a zegarek powinien automatycznie wykryć zmianę „boolVar” i wyświetlić ciąg wiadomości na konsoli.

Działało idealnie; na konsoli zostanie wyświetlony komunikat „Kliknięty przycisk”.

Ale obserwator nie wykrywa zmiany i nie zostaje zwolniony, jeśli chodzi o obserwowanie tablic lub obiektów. Zobaczmy tego demonstrację.

Przykład: Oglądanie obiektu

Załóżmy, że mamy obiekt w naszym komponencie i chcemy wyświetlić zmianę, która nastąpiła we właściwości obiektu. W poniższym przykładzie utworzyłem obiekt o nazwie „objVar”, który zawiera dwie pary klucz-wartość, „item” i „ilość”. Stworzyłem przycisk, w którym dodaję „1” do ilości tagu szablonu. Na koniec obserwuję obiekt „objVar” we właściwości watch i wyświetlam komunikat konsoli.

Teraz ten kod ma wyświetlać zmianę ilości obiektu. Ale kiedy wykonamy kod i klikniemy przycisk na stronie internetowej:

Możesz zobaczyć w powyższym gif; w konsoli nic się nie dzieje.

Powodem tego jest to, że obserwator nie zagłębia się w wartości obiektów i to jest prawdziwy problem, który zamierzamy teraz rozwiązać.

Vue.js zapewnia właściwość deep do obserwowania w głąb wartości obiektów i tablic. Składnia używania właściwości deep i oglądania zagnieżdżonych danych jest następująca:

W tej składni ustawiliśmy właściwość deep na true i przeorganizowaliśmy funkcję handler().

Teraz, po zmianie kodu, jeśli odświeżymy stronę i klikniemy w przycisk:

Tutaj możesz zobaczyć, że watcher działa i wyświetla komunikat w konsoli.

Wniosek

Po przeczytaniu tego posta oglądaj i obliczaj głębokie lub zagnieżdżone struktury danych w Vue.js nie jest już trudny. Nauczyliśmy się obserwować zmianę wartości w obiekcie lub tablicy i wykonywać niektóre zadania za pomocą właściwości „deep” Vue.js.