Dowiedz się o obserwatorach Vue.js, aby usprawnić tworzenie aplikacji internetowych

Kluczowe dania na wynos

• Struktury JavaScript, takie jak Vue, oferują funkcje, takie jak architektura komponentów, zarządzanie stanem i routing, aby uprościć tworzenie aplikacji internetowych.
• Obserwatorzy Vue to funkcje, które monitorują zmiany właściwości reaktywnych i pozwalają reagować na zdarzenia oraz modyfikację danych.
• Porównując obserwatorów z obliczonymi właściwościami, obliczone właściwości są bardziej zwięzłe i łatwiejsze do odczytania, co skutkuje lepszą wydajnością i debugowaniem.

Frameworki JavaScript stały się istotną częścią tworzenia stron internetowych. Wynika to z ich łatwo dostępnych funkcji, w tym architektury komponentów, zarządzania stanem i routingu. Pomagają one zmniejszyć stres, wysiłek i czas potrzebny do zbudowania aplikacji internetowej od podstaw.

Vue, jeden z takich frameworków, oferuje wiele funkcji przyspieszających rozwój. Funkcja obserwacji umożliwia monitorowanie wartości zmiennych i wyrażeń podczas wykonywania programu.

Kim są obserwatorzy w Vue?

Obserwatorzy Vue to funkcje monitorujące zmiany właściwości reaktywnych i odpowiednio reagujące. Obserwatorzy pozwalają reagować na zdarzenia i modyfikacje danych.

Aby użyć obserwatora, zaimportuj plik oglądać funkcja z vue pakiet w swoim skrypcie:

<scriptsetup>
import { watch } from 'vue';
script>

Możesz teraz użyć funkcji watch, aby zaimplementować obserwatora w komponencie Vue. Oto prosty przykład:

<template>
<div>
<p>{{ user }}p>
<button @click="changeName">Change Namebutton>
div>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
 user.value = 'Victor'; // Change the user's name
};
watch(user, (newUser, oldUser) => {
 alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
script>

Ten prosty komponent wykorzystuje funkcję watch do monitorowania zmian w nazwie użytkownika. Sekcja szablonu fragmentu definiuje strukturę HTML komponentu, która zawiera plik P tag wyświetlający wartość zmiennej reaktywnej użytkownika.

Szablon zawiera również element przycisku z a Zmień nazwę funkcjonować dołączony do detektora zdarzeń kliknięcia. Kiedy zmienna użytkownika ulegnie zmianie, Vue uruchamia funkcję wywołania zwrotnego. Funkcja wywołania zwrotnego wyświetla alert: „Nazwa użytkownika została zmieniona z „Chinedu” na „Victor”.”

Porównanie obserwatorów z obliczonymi właściwościami

Ważne jest, aby zrozumieć różnicę między obserwatorami a właściwościami obliczonymi. Chociaż oba są używane jako narzędzia reaktywności w Vue, powinieneś używać ich do różnych celów.

Na przykład możesz obliczyć sumę wieku ojca i syna za pomocą obserwatorów w następujący sposób:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
 total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
 total.value = Number(newAge) + Number(son.value)
})
script>

Ten komponent Vue wykorzystuje obserwatorów do uzyskania sumy wieku ojca i syna. W tym celu tworzy nową zmienną reaktywną, całkowity. Możesz stworzyć zmienna reaktywna podczas korzystania z interfejsu API kompozycji Vue.

Następnie fragment wykorzystuje dwa oglądać funkcje monitorowania wieku syna i ojca. Dla każdego wieku, ojca lub syna, fragment podsumowuje nową wartość z wiekiem drugiego. Następnie zapisuje wynik do pliku całkowity zmienna reaktywna.

Rozważ ten sam scenariusz w powyższym fragmencie, który wykorzystuje obliczone właściwości:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
 return Number(father.value) + Number(son.value);
});
script>

Ten fragment, w porównaniu do poprzedniego, jest bardziej zwięzły i łatwiejszy do odczytania. Fragment pobiera sumę wieku ojca i syna i zapisuje ją w wyliczonym ref (zmiennej), całkowity. Sekcja szablonu wyświetla następnie zmienną całkowitą za pomocą interpolacja, technika wiązania danych w Vue.

Nawet jeśli możesz uzyskać sumę dwóch wieków za pomocą obserwatorów, lepiej jest to zrobić za pomocą obliczonych właściwości. Używanie obserwatorów w tej sytuacji może prowadzić do wolniejszego ładowania i trudniejszego debugowania po prostu dlatego, że wymaga większej ilości kodu.

Nie używaj obserwatorów jako zamiennika obliczonych właściwości. Użyj obserwatorów do monitorowania i reagowania na zmiany danych oraz obliczanych właściwości, gdy chcesz uzyskać nowe dane z istniejących danych reaktywnych.

The natychmiastowy opcja to konfiguracja, której możesz użyć podczas tworzenia obserwatora. Ta opcja określa, czy obserwator powinien uruchomić wywołanie zwrotne natychmiast po zamontowaniu komponentu przez Vue.

Oto przykład komponentu korzystającego z obserwatora z opcją natychmiastową:

<scriptsetup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
 count,
 (newCount, oldCount) => {
 console.log(`Count changed from ${oldCount} to ${newCount}`);
 },
 { immediate: true }
);
script>

W powyższym fragmencie obserwator wykona wywołanie zwrotne natychmiast po inicjalizacji komponentu i zarejestruje w konsoli „Liczba zmieniona z niezdefiniowanej na 10”. To pokazuje, że zmienna początkowa była niezdefiniowana, zanim Vue wstrzyknął wartość 10 do licznika ref.

Opcja natychmiastowa może być przydatna w scenariuszach, w których chcesz wykonać akcję początkową lub inicjalizację w oparciu o bieżącą wartość obserwowanej właściwości. Na przykład, gdy chcesz, aby Twoja aplikacja pobierała dane z interfejsu API po zamontowaniu komponentu przez Vue.

Opcja Deep dostępna w Vue Watchers

The głęboko opcja dostępna podczas pracy z obserwatorami w Vue umożliwia głęboką obserwację zmian w obrębie zagnieżdżonych obiektów lub tablic. Po ustawieniu na PRAWDAobserwator może wykryć zmiany we właściwościach zagnieżdżonych.

Oto przykład komponentu Vue z opcją deep:

<scriptsetup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 },
 { deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
script>

Powyższy fragment inicjuje plik dane ref z obiektem zawierającym a długość nieruchomość. Fragment ustawia opcję deep na PRAWDA. Następnie loguje się do konsoli, że dane uległy zmianie od czasu zmiany właściwości długości 43.

Bez opcji deep ustawionej na true funkcja watch nie zauważy żadnych zmian w obiekcie. Jednak Vue śledzi wszystkie zagnieżdżone i głębokie zmiany bez opcji deep, gdy inicjujesz zmienną danych jako obiekt reaktywny:

<scriptsetup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 }
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
script>

Funkcja watch w powyższym fragmencie zarejestruje w konsoli informację o zmianie danych, ponieważ zmienna danych jest obiektem reaktywnym.

Twórz lepsze aplikacje dzięki Vue Watchers

Obserwatorzy Vue mogą pomóc Ci osiągnąć precyzyjną reaktywność w Twoich aplikacjach. Kontrolują sposób obserwowania zmian we właściwościach danych i uruchamiają w odpowiedzi niestandardową logikę.

Zrozumienie, kiedy używać obserwatorów, ich różnice w stosunku do obliczonych właściwości oraz opcje takie jak natychmiastowe i głębokie, mogą znacznie zwiększyć możliwości tworzenia bardzo responsywnych aplikacji Vue.