Научете за наблюдателите на Vue.js, за да подобрите разработката на вашето уеб приложение

Ключови изводи

• JavaScript рамки като Vue предлагат функции като компонентна архитектура, управление на състоянието и маршрутизиране за опростяване на разработката на уеб приложения.
• Vue watchers са функции, които наблюдават промените в реактивните свойства и ви позволяват да реагирате на събития и модификация на данни.
• Сравнявайки наблюдателите с изчислените свойства, изчислените свойства са по-кратки и по-лесни за четене, което води до по-добра производителност и отстраняване на грешки.

Рамките на JavaScript се превърнаха в жизненоважна част от уеб разработката. Това се дължи на техните лесно достъпни функции, включително архитектура на компоненти, управление на състоянието и маршрутизиране. Те помагат за намаляване на стреса, усилията и времето, необходими за изграждане на уеб приложение от нулата.

Vue, една от тези рамки, предлага много функции за ускоряване на разработката. Функцията за наблюдение ви позволява да наблюдавате стойностите на променливите и изразите по време на изпълнение на програмата.

Какво представляват наблюдателите във Vue?

Наблюдателите на Vue са функции, които наблюдават промените в реактивно свойство и реагират съответно. Наблюдателите ви позволяват да реагирате на събития и промяна на данни.

За да използвате наблюдател, импортирайте гледам функция от vue пакет във вашия скрипт:

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

Вече можете да използвате функцията за наблюдение, за да внедрите наблюдател във вашия Vue компонент. Ето един прост пример:

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

Този прост компонент използва функцията за наблюдение, за да наблюдава промяната в името на потребителя. Секцията за шаблон на фрагмента дефинира HTML структурата на компонента, която включва a стр таг, който показва стойността на потребителската реактивна променлива.

Шаблонът също така съдържа елемент бутон с a changeName функция прикачен към слушател на събитие за кликване. Когато потребителската променлива се промени, Vue задейства функцията за обратно извикване. Функцията за обратно извикване показва предупреждение: „Потребителското име е променено от „Chinedu“ на „Victor“.“

Сравняване на наблюдатели с изчислени свойства

Важно е да разберете разликата между наблюдателите и изчислените свойства. Въпреки че и двата се използват като инструменти за реактивност във Vue, трябва да ги използвате за различни цели.

Например, можете да изчислите сумата от възрастта на баща и син с наблюдатели по следния начин:

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

Този компонент на Vue използва наблюдатели, за да получи сумата от възрастта на бащата и сина. За да направи това, той създава нова реактивна променлива, обща сума. Можете да създадете a реактивна променлива, когато използвате API за композиция на Vue.

След това фрагментът използва две гледам функции за следене на възрастта на сина и бащата. За всяка възраст, баща или син, фрагментът обобщава новата стойност с възрастта на другия. След това записва резултата в обща сума реактивна променлива.

Помислете за същия сценарий в горния фрагмент за такъв, който използва изчислени свойства:

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

Този фрагмент, в сравнение с предишния, е по-сбит и по-лесен за четене. Фрагментът получава сбора от възрастта на бащата и сина и го записва в изчислен реф (променлива), обща сума. След това разделът на шаблона показва общата променлива с помощта на интерполация, техника за свързване на данни във Vue.

Дори ако можете да получите общата сума от двете възрасти с наблюдатели, по-добре е да го направите с изчислени свойства. Използването на наблюдатели в тази ситуация може да доведе до по-бавно време за зареждане и по-трудно отстраняване на грешки, просто защото включва повече код.

Не използвайте наблюдатели като заместител на изчислените свойства. Използвайте наблюдатели, за да наблюдавате и реагирате на промени в данните и изчислени свойства, когато искате да извлечете нови данни от съществуващи реактивни данни.

The незабавно опция е конфигурация, която можете да използвате, когато създавате наблюдател. Тази опция определя дали наблюдателят трябва да задейства своето обратно извикване веднага след като Vue е монтирал компонента.

Ето пример за компонент, използващ наблюдател с незабавна опция:

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

Във фрагмента по-горе наблюдателят ще изпълни своето обратно извикване веднага след инициализиране на компонента и ще регистрира „Броят е променен от недефиниран на 10“ в конзолата. Това показва, че първоначалната променлива е била недефинирана, преди Vue да инжектира стойността от 10 към реф.

Незабавната опция може да бъде удобна в сценарии, при които искате да извършите първоначално действие или инициализация въз основа на текущата стойност на наблюдаваното свойство. Например, когато имате нужда приложението ви да извлича данни от API, след като Vue монтира компонент.

Опцията Deep, налична във Vue Watchers

The Дълбок опцията, налична при работа с наблюдатели във Vue, позволява дълбоко наблюдение на промените в рамките на вложени обекти или масиви. Когато е зададено на вярно, наблюдателят може да открие промени във вложени свойства.

Ето пример за Vue компонент с опцията 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>

Фрагментът по-горе инициализира данни ref с обект, съдържащ a дължина Имот. Фрагментът настройва дълбоката опция на вярно. След това се регистрира в конзолата, че данните са се променили, тъй като свойството за дължина е променено на 43.

Без дълбоката опция, зададена на true, функцията за наблюдение няма да забележи промени в обекта. Въпреки това, Vue проследява всички вложени и дълбоки промени без опцията deep, когато инициализирате променливата данни като реактивен обект:

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

Функцията за наблюдение в горния фрагмент ще регистрира в конзолата, че данните са променени, тъй като променливата за данни е реактивен обект.

Създавайте по-добри приложения с Vue Watchers

Наблюдателите на Vue могат да ви помогнат да постигнете фина реактивност във вашите приложения. Те контролират как можете да наблюдавате промените в свойствата на данните и да изпълнявате персонализирана логика в отговор.

Разбирането кога да използвате наблюдатели, техните разлики от изчислените свойства и опции като незабавно и дълбоко може значително да подобри способността ви да създавате много отзивчиви Vue приложения.