Dowiedz się więcej o Vue.js Watchers, aby usprawnić tworzenie aplikacji internetowych

Kluczowe wnioski

Vue to popularny framework JavaScript, który zapewnia programistom kilka kluczowych korzyści przy tworzeniu aplikacji internetowych. Obejmują one wsparcie dla architektury opartej na komponentach, co pozwala na modułowy kod wielokrotnego użytku; solidny system zarządzania stanem, który pomaga zachować spójność w różnych częściach aplikacji; oraz wbudowane możliwości routingu, umożliwiające płynną nawigację między różnymi stronami lub widokami w tej samej witrynie. Wykorzystując te funkcje, programiści mogą usprawnić swoje przepływy pracy i tworzyć bardziej wydajne, skalowalne aplikacje internetowe za pomocą Vue.

Obserwatorzy Vue służą jako obserwatorzy właściwości reaktywnych, umożliwiając wykrywanie zmian i ułatwiając reagowanie na występujące zdarzenia lub modyfikacje danych.

Wykorzystanie obliczanych właściwości oferuje bardziej zwięzłą i czytelną alternatywę w porównaniu do korzystania z obserwatorów w celu osiągnięcia podobnej funkcjonalności, co ostatecznie prowadzi do poprawy szybkości wykonywania i usprawnienia procesów debugowania.

Struktury JavaScript ewoluowały jako niezbędny element w dziedzinie tworzenia stron internetowych, przypisywany ich przyjaznym dla użytkownika atrybutom, takim jak modułowa konstrukcja, zachowanie stanu i zarządzanie nawigacją. W związku z tym te integralne komponenty znacząco przyczyniają się do zmniejszenia obciążenia, wydatków i czasu wymaganego do skonstruowania aplikacji internetowej de novo.

Vue oferuje szereg funkcji, które ułatwiają szybkie tworzenie aplikacji. Jedną z takich funkcji jest funkcja Watch, która umożliwia programistom śledzenie zmian wartości zmiennych i wyrażeń podczas operacji wykonywanych w czasie wykonywania.

Czym są obserwatorzy w Vue?

Obserwatorzy Vue to funkcje, które obserwują zmiany we właściwościach reaktywnych, a następnie zapewniają odpowiednią odpowiedź zgodnie z takimi modyfikacjami. Te obserwatory umożliwiają użytkownikom reagowanie na zdarzenia i dostosowania danych, zapewniając środki do uważnego monitorowania w aplikacji.

Aby wykorzystać Watcher w projekcie Vue, należy najpierw zaimportować funkcję “watch” z pakietu Vue i włączyć ją do skryptu.

 <script setup>
import { watch } from 'vue';
</script>

Wykorzystując dostarczoną funkcję watch , można skutecznie włączyć “obserwatora” do swojego komponentu Vue. Podstawowa ilustracja jest następująca:

 <template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script setup>
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 konkretny element wykorzystuje funkcję Watcher do śledzenia zmian w tożsamości użytkownika. Obszar znaczników bloku kodu ustanawia strukturę HTML komponentu, która obejmuje element akapitu, który wykazuje wartość reagenta o nazwie “user”.

Szablon zawiera komponent przycisku, który jest powiązany z detektorem zdarzeń kliknięcia i funkcją changeName . Po modyfikacji wprowadzonej przez użytkownika, Vue wywołuje wyznaczoną funkcję zwrotną, która następnie wyświetla wyskakujący komunikat informujący, że “nazwa użytkownika została zaktualizowana z ‘Chinedu’ na ‘Victor’”.

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

Kluczowe jest zrozumienie różnic między obserwatorami a właściwościami obliczanymi podczas wykorzystywania ich jako mechanizmów reaktywnych w ramach Vue. Podczas gdy oba służą podobnym funkcjom w zakresie aktualizacji powiązań danych w oparciu o zmiany, ważne jest, aby używać każdego z nich zgodnie z ich konkretnym przeznaczeniem.

Ilustracją tej koncepcji może być obliczenie łącznego wieku ojca i syna za pomocą zegara słonecznego, jak poniżej:

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
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>

Dany komponent Vue wykorzystuje obserwatorów w celu uzyskania sumy wieku ojca i syna poprzez utworzenie nowej zmiennej reaktywnej znanej jako “total”. Proces ten jest wykonywany przy użyciu interfejsu API kompozycji dostarczanego przez Vue.

Kod wykorzystuje dwie funkcje watch do monitorowania wieku ojca i syna. Obliczając sumę tych wieków i aktualizując wartość wieku jednej osoby z wiekiem drugiej, uzyskuje się ostateczną sumę dla połączonego wieku. Wynik ten jest następnie przechowywany w tablicy

W podobnym duchu przeanalizujmy przykład obejmujący obliczone właściwości:javascriptconst person = {firstName: ‘John’,lastName: ‘Doe’,fullName() {return this.firstName \+ ’ ’ \+ this.lastName;}}; console.log(person.fullName); // Output: John Doe

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
import { ref , computed } from 'vue';

const father = ref();
const son = ref();

const total = computed(() => {
  return Number(father.value) \\+ Number(son.value);
});

</script>

Zmieniony kod przedstawia bardziej zwięzłe i usprawnione podejście do odczytywania wieku zarówno ojca, jak i syna, jednocześnie wykorzystując obliczoną właściwość do przechowywania ich łącznej sumy. Wykorzystując potężne możliwości wiązania danych Vue poprzez interpolacje w sekcji szablonu, informacje mogą być płynnie wyświetlane użytkownikowi.

Wykorzystanie obliczanych właściwości zapewnia bardziej wydajny sposób określania sumy dwóch wartości wieku w porównaniu do polegania na obserwatorach. Implementacja obserwatorów w tym kontekście może spowodować wydłużenie czasu ładowania i skomplikować proces debugowania ze względu na z natury bardziej złożoną bazę kodu.

Zaleca się wykorzystywanie obserwatorów wyłącznie do obserwowania i reagowania na modyfikacje danych, a nie wykorzystywanie ich jako alternatywy dla obliczanych właściwości, które są zaprojektowane specjalnie do uzyskiwania dodatkowych informacji z bieżących danych reaktywnych.

Opcja natychmiastowa dostępna dla obserwatorów w Vue

Opcja “natychmiastowa”, która służy jako alternatywny wybór podczas procesu tworzenia obserwatora, określa, czy funkcja wywołania zwrotnego obserwatora zostanie wykonana natychmiast po pomyślnym zamontowaniu powiązanego komponentu Vue.

Z pewnością, oto ilustracja komponentu wykorzystującego funkcję watcher z atrybutem “immediate”:

 <script setup>
import { ref, watch } from 'vue';

const count = ref(10);

watch(
  count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
  { immediate: true }
);
</script>

Po rozpoczęciu cyklu życia wyżej wymienionego komponentu, obserwator niezwłocznie wykona swoją funkcję towarzyszącą i zarejestruje “Count changed from an indeterminate state to ten” w dzienniku systemowym. Takie działanie wskazuje, że wstępna jednostka nie została przypisana do żadnej wartości przed dostarczeniem przez Vue wartości dziesięć do referencji licznika.

W niektórych sytuacjach użycie opcji “immediate” może okazać się korzystne do przeprowadzenia początkowej operacji lub inicjalizacji zależnej od aktualnego stanu monitorowanego atrybutu. Na przykład, jeśli aplikacja wymaga pobrania danych z interfejsu API, gdy tylko zamontuje określony komponent.

Głęboka opcja dostępna w obserwatorach Vue

Funkcja obserwatora Vue oferuje głęboki poziom obserwacji modyfikacji w zamkniętych obiektach lub tablicach, umożliwiając wykrywanie zmian zachodzących w głęboko osadzonych właściwościach. Ta funkcja jest aktywowana przez ustawienie odpowiedniego parametru na jego odpowiednik twierdzący.

Oto ilustracja komponentu Vue.js wykorzystującego opcję “deep”, która pozwala na wyświetlanie i edycję zagnieżdżonych obiektów w strukturze przypominającej drzewo w polu wejściowym:

 <script setup>
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>

Podany segment kodu inicjalizuje referencję data obiektem posiadającym atrybut “length”. Następnie włącza opcję “deep” i sprawdza w konsoli, że dane zostały zaktualizowane, ponieważ wartość właściwości “length” zmieniła się z pierwotnego stanu na trzydzieści trzy (33).

Podczas inicjowania zmiennej danych w Vue jako obiektu reaktywnego, jest on w stanie śledzić zmiany w głęboko zagnieżdżonych obiektach bez użycia opcji “deep”. I odwrotnie, jeśli opcja “deep” nie jest włączona, funkcja watch nie wykryje modyfikacji wprowadzonych do takich obiektów.

 <script setup>
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>

Dostarczony kod zawiera funkcję watch, która po wykryciu zmian w reaktywnym obiekcie określanym jako “data” rejestruje komunikat w konsoli wskazujący, że wspomniane modyfikacje miały miejsce.

Buduj lepsze aplikacje z obserwatorami Vue

Obserwatorzy Vue umożliwiają wysoki stopień reaktywnego zachowania w aplikacji, pozwalając na obserwację modyfikacji określonych atrybutów danych, wyzwalając z góry określone operacje w połączeniu z takimi zmianami.

Uzyskanie biegłego zrozumienia odpowiednich okoliczności do stosowania obserwatorów, dostrzeganie ich odmienności od obliczanych właściwości i zapoznanie się z wyborami, takimi jak natychmiastowe i głębokie, może znacznie zwiększyć zdolność do tworzenia wysoce reaktywnych aplikacji Vue.