Իմացեք Vue.js Watchers-ի մասին՝ ձեր վեբ հավելվածի մշակումը բարելավելու համար

Օգտագործեք դիտորդներ փոփոխությունները վերահսկելու և վարքագիծը ավելի ինտուիտիվ կերպով իրականացնելու համար:

Հիմնական Takeaways

JavaScript շրջանակները դարձել են վեբ մշակման կենսական մաս: Դա պայմանավորված է նրանց հեշտությամբ հասանելի հատկանիշներով, ներառյալ բաղադրիչի ճարտարապետությունը, վիճակի կառավարումը և երթուղին: Դրանք օգնում են նվազեցնել սթրեսը, ջանքերը և ժամանակը, որն անհրաժեշտ է զրոյից վեբ հավելված ստեղծելու համար:

Vue-ը՝ այս շրջանակներից մեկը, առաջարկում է բազմաթիվ հնարավորություններ՝ զարգացումն արագացնելու համար: Ժամացույցի գործառույթը թույլ է տալիս վերահսկել փոփոխականների և արտահայտությունների արժեքները ծրագրի կատարման ընթացքում:

Ի՞նչ են դիտողները Vue-ում:

Vue դիտորդները գործառույթներ են, որոնք վերահսկում են ռեակտիվ հատկության փոփոխությունները և համապատասխանաբար արձագանքում: Դիտորդները թույլ են տալիս արձագանքել իրադարձություններին և տվյալների փոփոխմանը:

Watcher օգտագործելու համար ներմուծեք watch ֆունկցիան ձեր սցենարի vue փաթեթից.

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

Այժմ դուք կարող եք օգտագործել ժամացույցի ֆունկցիան՝ ձեր Vue բաղադրիչում դիտորդ ներդրելու համար: Ահա մի պարզ օրինակ.

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

Այս պարզ բաղադրիչն օգտագործում է ժամացույցի ֆունկցիան՝ վերահսկելու օգտվողի անվան փոփոխությունը: Հատվածի կաղապարի բաժինը սահմանում է բաղադրիչի HTML կառուցվածքը, որը ներառում է p թեգ, որը ցուցադրում է օգտագործողի ռեակտիվ փոփոխականի արժեքը։

Կաղապարը պարունակում է նաև կոճակի տարր, որի changeName ֆունկցիան կցված է սեղմելով իրադարձությունների ունկնդիրին: Երբ օգտագործողի փոփոխականը փոխվում է, Vue-ն գործարկում է հետ կանչելու գործառույթը: Հետ կանչի գործառույթը ցույց է տալիս ահազանգ. «Օգտվողի անունը փոխվել է «Chinedu»-ից «Victor»-ի»:

Դիտորդների համեմատությունը հաշվարկված հատկությունների հետ

Կարևոր է հասկանալ տարբերությունը դիտողների և հաշվարկված հատկությունների միջև: Չնայած դրանք երկուսն էլ օգտագործվում են որպես ռեակտիվության գործիքներ Vue-ում, դուք պետք է դրանք օգտագործեք տարբեր նպատակների համար:

Օրինակ, դուք կարող եք հաշվարկել հոր և որդու տարիքի գումարը դիտողների հետ, այսպես.

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

Այս Vue բաղադրիչն օգտագործում է դիտորդներ՝ հոր և որդու տարիքի գումարը ստանալու համար: Դա անելու համար այն ստեղծում է նոր ռեակտիվ փոփոխական՝ ընդհանուր: Դուք կարող եք ստեղծել ռեակտիվ փոփոխական, երբ օգտագործում եք Vue's Composition API-ն:

Այնուհետև հատվածն օգտագործում է երկու ժամացույց ֆունկցիա՝ որդու և հոր տարիքը դիտելու համար: Յուրաքանչյուր տարիքի համար՝ կա՛մ հայր, կա՛մ որդու, հատվածն ամփոփում է նոր արժեքը մյուսի տարիքի հետ: Այնուհետև այն պահպանում է արդյունքը ընդհանուր ռեակտիվ փոփոխականում:

Դիտարկենք նույն սցենարը վերը նշված հատվածում, որն օգտագործում է հաշվարկված հատկություններ.

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

Այս հատվածը, համեմատած առաջինի հետ, ավելի հակիրճ է և ավելի հեշտ ընթեռնելի: Հատվածը ստանում է հոր և որդու տարիքի գումարը և պահպանում է այն հաշվարկված ռեֆերում (փոփոխական)՝ ընդհանուր: Կաղապարի բաժինն այնուհետև ցուցադրում է ընդհանուր փոփոխականը՝ օգտագործելով ինտերպոլացիա՝ Vue-ում տվյալների կապման տեխնիկա:

Նույնիսկ եթե դիտողների հետ կարող եք ստանալ երկու տարիքի ընդհանուր գումարը, ավելի լավ է դա անել հաշվարկված հատկություններով: Այս իրավիճակում դիտորդների օգտագործումը կարող է հանգեցնել ավելի դանդաղ բեռնման ժամանակի և ավելի դժվար վրիպազերծման, պարզապես այն պատճառով, որ այն ներառում է ավելի շատ կոդ:

Անմիջական տարբերակը հասանելի է Vue-ում դիտորդներին

անմիջական տարբերակը կոնֆիգուրացիա է, որը կարող եք օգտագործել դիտորդ ստեղծելիս: Այս տարբերակը որոշում է, թե արդյոք դիտորդը պետք է գործարկի իր հետ կանչը Vue-ի բաղադրիչը միացնելուց անմիջապես հետո:

Ահա մի բաղադրիչի օրինակ, որն օգտագործում է դիտորդ՝ անմիջական տարբերակով.

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

Վերևի հատվածում դիտորդը կկատարի իր հետ կանչը բաղադրիչի սկզբնավորումից անմիջապես հետո և մուտքագրում է «Հաշիվը փոխվել է չսահմանվածից մինչև 10» վահանակ: Սա ցույց է տալիս, որ սկզբնական փոփոխականը չսահմանված էր մինչև Vue-ը 10-ի արժեքը ներարկեց count ref:

Անմիջական տարբերակը կարող է հարմար լինել այն սցենարների դեպքում, երբ դուք ցանկանում եք կատարել նախնական գործողություն կամ սկզբնավորում՝ հիմնված դիտվող հատկության ընթացիկ արժեքի վրա: Օրինակ, երբ ձեզ անհրաժեշտ է, որ ձեր հավելվածը տվյալներ վերցնի API-ից, երբ Vue-ն միացնի բաղադրիչը:

Խորը տարբերակը հասանելի է Vue Watchers-ում

Vue-ում դիտողների հետ աշխատելիս հասանելի խորը տարբերակը հնարավորություն է տալիս խորը դիտարկել փոփոխությունները տեղադրված օբյեկտների կամ զանգվածների ներսում: Երբ դրված է true, դիտողը կարող է հայտնաբերել փոփոխությունները տեղադրված հատկությունների ներսում:

Ահա Vue բաղադրիչի օրինակ խորը տարբերակով.

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

Վերևի հատվածը սկզբնավորում է տվյալների ref-ը length հատկություն պարունակող օբյեկտով: Հատվածը սահմանում է խորքային տարբերակը true: Այնուհետև այն գրանցվում է վահանակ, որ տվյալները փոխվել են, քանի որ երկարության հատկությունը փոխվել է 43:

Առանց «true»-ի վրա դրված խորը ընտրանքի, ժամացույցի գործառույթը չի նկատի օբյեկտի որևէ փոփոխություն: Այնուամենայնիվ, Vue-ն հետևում է բոլոր ներկառուցված և խորքային փոփոխություններին առանց խորը տարբերակի, երբ դուք սկզբնավորում եք տվյալների փոփոխականը որպես ռեակտիվ օբյեկտ.

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

Վերոնշյալ հատվածի ժամացույցի ֆունկցիան մուտք կգործի կոնսոլ, որտեղ տվյալները փոխվել են, քանի որ տվյալների փոփոխականը ռեակտիվ օբյեկտ է:

Ստեղծեք ավելի լավ հավելվածներ Vue Watchers-ի հետ

Vue-ի դիտորդները կարող են օգնել ձեզ հասնել նուրբ ռեակտիվության ձեր հավելվածներում: Նրանք վերահսկում են, թե ինչպես կարող եք դիտարկել տվյալների հատկությունների փոփոխությունները և ի պատասխան գործարկել հատուկ տրամաբանություն:

Հասկանալը, թե երբ օգտագործել դիտորդները, դրանց տարբերությունները հաշվարկված հատկություններից և այնպիսի տարբերակներ, ինչպիսիք են անմիջական և խորը, կարող են զգալիորեն մեծացնել ձեր կարողությունը՝ ստեղծելու շատ արձագանքող Vue հավելվածներ: