Сазнајте више о Вуе.јс Ватцхерс-у да бисте побољшали развој веб апликација

Кључне Такеаваис

• ЈаваСцрипт оквири као што је Вуе нуде функције као што су архитектура компоненти, управљање стањем и рутирање како би се поједноставио развој веб апликација.
• Вуе посматрачи су функције које прате промене реактивних својстава и омогућавају вам да реагујете на догађаје и модификацију података.
• Упоређујући посматраче са израчунатим својствима, израчуната својства су сажетија и лакша за читање, што резултира бољим перформансама и отклањањем грешака.

ЈаваСцрипт оквири су постали витални део веб развоја. То је због њихових лако доступних функција, укључујући архитектуру компоненти, управљање стањем и рутирање. Ово помаже да се смањи стрес, напор и време потребно за прављење веб апликације од нуле.

Вуе, један од ових оквира, нуди многе функције за убрзавање развоја. Функција гледања вам омогућава да надгледате вредности променљивих и израза током извршавања програма.

Шта су посматрачи у Вуе-у?

Вуе посматрачи су функције које прате промене у реактивном својству и реагују у складу са тим. Посматрачи вам омогућавају да реагујете на догађаје и измене података.

Да бисте користили посматрач, увезите гледати функција из вуе пакет у вашој скрипти:

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

Сада можете да користите функцију гледања за имплементацију посматрача у вашу Вуе компоненту. Ево једноставног примера:

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

Ова једноставна компонента користи функцију сата за праћење промене корисничког имена. Одељак шаблона исечка дефинише ХТМЛ структуру компоненте, која укључује а стр таг који приказује вредност корисничке реактивне променљиве.

Шаблон такође садржи елемент дугмета, са а Промена име функција прикачен на слушалац догађаја клика. Када се корисничка променљива промени, Вуе покреће функцију повратног позива. Функција повратног позива приказује упозорење: „Корисничко име је промењено из „Цхинеду“ у „Вицтор“.“

Поређење посматрача са рачунарским својствима

Важно је разумети разлику између посматрача и израчунатих својстава. Иако се обоје користе као алати за реактивност у Вуе-у, требало би да их користите у различите сврхе.

На пример, можете израчунати збир старости оца и сина са посматрачима, овако:

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

Ова Вуе компонента користи посматраче да добије збир старости оца и сина. Да би то урадио, креира нову реактивну променљиву, укупно. Можете креирати а реактивна променљива када користите Вуеов АПИ за композицију.

Исечак тада користи два гледати функције за праћење старости сина и оца. За свако доба, било оца или сина, исечак сажима нову вредност са узрастом другог. Затим чува резултат у укупно реактивна варијабла.

Размотрите исти сценарио у горњем исечку за онај који користи израчуната својства:

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

Овај исечак је, у поређењу са претходним, сажетији и лакши за читање. Исечак добија збир старости оца и сина и чува га у израчунатом реф (променљива), укупно. Одељак шаблона затим приказује укупну променљиву користећи интерполација, техника везивања података у Вуе-у.

Чак и ако можете да добијете збир два узраста помоћу посматрача, боље је то учинити помоћу израчунатих својстава. Коришћење посматрача у овој ситуацији може довести до споријег времена учитавања и тежег отклањања грешака само зато што укључује више кода.

Не користите посматраче као замену за израчуната својства. Користите посматраче да надгледате и реагујете на промене података и израчунате својства када желите да изведете нове податке из постојећих реактивних података.

Тхе непосредан опција је конфигурација коју можете користити када креирате посматрач. Ова опција одређује да ли посматрач треба да покрене свој повратни позив одмах након што Вуе монтира компоненту.

Ево примера компоненте која користи посматрач са тренутном опцијом:

<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“ у конзолу. Ово показује да је почетна променљива била недефинисана пре него што је Вуе убацио вредност 10 у број реф.

Непосредна опција може бити згодна у сценаријима у којима желите да извршите почетну акцију или иницијализацију на основу тренутне вредности посматраног својства. На пример, када вам је потребна апликација да преузме податке из АПИ-ја када Вуе монтира компоненту.

Опција Дееп доступна у Вуе Ватцхерс-у

Тхе дубоко опција доступна када радите са посматрачима у Вуе-у омогућава дубоко посматрање промена унутар угнежђених објеката или низова. Када је подешено на истина, посматрач може да открије промене унутар угнежђених својстава.

Ево примера Вуе компоненте са опцијом дееп:

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

Исечак изнад иницијализује података реф са објектом који садржи а дужина имовина. Исечак поставља опцију дубоку на истина. Затим евидентира на конзоли да су се подаци променили од промене својства дужине у 43.

Без опције дееп постављене на труе, функција гледања неће приметити никакве промене на објекту. Међутим, Вуе прати све угнежђене и дубоке промене без дубоке опције када иницијализујете променљиву података као реактивни објекат:

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

Функција посматрања у горњем исечку ће пријавити на конзолу да су подаци промењени јер је променљива података реактивни објекат.

Направите боље апликације помоћу Вуе Ватцхерс-а

Вуе-ови посматрачи могу вам помоћи да постигнете фину реактивност у вашим апликацијама. Они контролишу како можете да посматрате промене у својствима података и покрећете прилагођену логику као одговор.

Разумевање када треба користити посматраче, њихове разлике у односу на израчуната својства и опције као што су тренутни и дубоки могу значајно да побољшају вашу способност да правите Вуе апликације које веома брзо реагују.