Vue obliczone głębokie struktury

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. Wszyscy jednak wiemy, że Vue.JS zapewnia zegarek i obliczone właściwości do wykonania pewnych zmiennych zmian. Ale jeśli chodzi o zmiany zagnieżdżonych, Vue.JS tego nie wykrywa. Ten post nauczy się wprowadzać pewne zmiany, oglądając zagnieżdżone dane tablic lub obiektów.

Przed dowiedzieć się o oglądaniu zagnieżdżonych danych w Vue.JS, najpierw zrozummy, jak działa nieruchomość Watch?

Obejrzyj nieruchomość

Właściwość obserwacyjna służy do oglądania zmiennej i umożliwia użytkownikowi wykonywanie pożądanych zadań dotyczących zmiany zmiennej.

Przykład: Obejrzyj zmienną

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

Po napisaniu powyższego kodu strona internetowa byłaby taka.

Jeśli klikniemy przycisk, stan „Boolvar” powinien zostać zmieniony z powodu atrybutu przycisku na kliknięciu, a zegarek powinien automatycznie wykryć zmianę w „Boolvar” i wyświetlić ciąg wiadomości na konsoli.

Działało idealnie dobrze; Wiadomość „Kliknięta przycisk” jest wyświetlana na konsoli.

Ale obserwator nie wykrywa zmiany i nie zostaje zwolniony, jeśli chodzi o oglądanie tablic lub przedmiotó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 w właściwości obiektu. W podanym poniżej przykładzie utworzyłem obiekt o nazwie „OBJVAR”, który zawiera dwie pary kluczowe, „pozycja” i „ilość”. Utworzyłem przycisk, w którym dodam „1” do ilości znacznika szablonu. Na koniec oglądam obiekt „OBJVAR” w właściwości Watch i wyświetlam wiadomość konsolową.

Teraz ten kod ma wyświetlić zmianę ilości obiektu. Ale kiedy wykonujemy kod i klikamy przycisk na stronie internetowej:

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

Powodem tego jest to, że obserwator nie patrzy głęboko w wartości obiektów, a to jest prawdziwy problem, na który teraz rozwiązujemy.

Vue.JS zapewnia głęboką własność do obserwowania głęboko w wartościach obiektów i tablic. Składnia do korzystania z głębokiej właściwości i oglądania zagnieżdżonych danych jest następująca:

W tej składni ustawiliśmy Głęboką właściwość na true i przestawiliśmy funkcję Handler ().

Teraz, po zmianie kodu, jeśli ponownie załadujemy stronę internetową i kliknij przycisk:

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

Wniosek

Po przeczytaniu tego postu, oglądaniu i obliczaniu głębokich lub zagnieżdżonych struktur danych w Vue.JS nie jest już trudne. Nauczyliśmy się, jak obserwować zmianę wartości w obiekcie lub tablicy i wykonywać niektóre zadania za pomocą „głębokiej” właściwości Vue.JS.