Кључни закључци
- JavaScript фрејмворци, попут Vue.js, пружају функционалности попут компоненти, управљања стањем и рутирања, што значајно поједностављује развој веб апликација.
- У Vue-у, „watchers“ су функције које надгледају промене у реактивним својствима и омогућавају реаговање на те промене.
- У поређењу са „computed properties“, „computed properties“ су обично концизнији и лакши за читање, што може довести до бољих перформанси и лакшег отклањања грешака.
JavaScript фрејмворци су постали неизоставан део савременог веб развоја. Њихова популарност лежи у чињеници да нуде функционалности попут архитектуре компоненти, управљања стањем апликације и навигације. Ово помаже у смањењу сложености и времена потребног за изградњу веб апликација од почетка.
Vue.js, као један од водећих фрејмворка, нуди мноштво алата за убрзавање процеса развоја. Функција посматрања (watch) омогућава праћење промена вредности променљивих и израза током извршавања кода.
Шта су „watchers“ у Vue.js?
„Watchers“ у Vue.js-у су функције које прате промене у реактивним својствима и реагују на те промене. Оне вам омогућавају да реагујете на догађаје и измене података у вашој апликацији.
Да бисте користили „watcher“, потребно је да увезете функцију `watch` из Vue пакета:
<script setup>
import { watch } from 'vue';
</script>
Сада можете користити функцију `watch` за имплементацију посматрача у својој Vue компоненти. Ево једноставног примера:
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Промени име</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
user.value="Victor"; // Промена имена корисника
};
watch(user, (newUser, oldUser) => {
alert(`Корисничко име је промењено са "${oldUser}" на "${newUser}"`);
});
</script>
Ова компонента користи функцију `watch` за праћење промене корисничког имена. У HTML структури компоненте, приказана је вредност променљиве `user`, а дугме `changeName` је повезано са функцијом за промену имена. Када се вредност променљиве `user` промени, Vue покреће функцију која приказује поруку са упозорењем о промени имена.
Поређење „watchers“ са „computed properties“
Важно је разумети разлику између „watchers“ и „computed properties“. Иако се оба користе за постизање реактивности у Vue.js, имају различите намене и треба их користити у различитим ситуацијама.
На пример, можемо израчунати збир година оца и сина користећи „watchers“ на следећи начин:
<template>
<input type="text" placeholder="Године оца" v-model="father">
<input type="text" placeholder="Године сина" v-model="son">
<p>Укупан број година: {{ 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>
Ова компонента користи „watchers“ за израчунавање збира година оца и сина. Користи реактивну променљиву `total`, која се ажурира при свакој промени година оца или сина.
Код надгледа старост сина и оца, и када се било која од њих промени, израчунава се укупан збир и чува у променљивој `total`.
Исти сценарио, али са коришћењем „computed properties“:
<template>
<input type="text" placeholder="Године оца" v-model="father">
<input type="text" placeholder="Године сина" v-model="son">
<p>Укупан број година: {{ 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>
Овај код је концизнији и лакши за читање. „Computed property“ `total` израчунава збир година оца и сина. У HTML-у се вредност `total` приказује користећи интерполацију.
Иако је могуће израчунати збир година помоћу „watchers“, у овом случају је боље користити „computed properties“. Употреба „watchers“ у овом случају може довести до споријег учитавања и отежаног отклањања грешака, јер је код сложенији.
Не треба користити „watchers“ као замену за „computed properties“. „Watchers“ користите за надгледање промена података и реаговање на њих, док „computed properties“ користите када желите да добијете нове податке на основу постојећих реактивних података.
Опција `immediate` у „watcher“ конфигурацији омогућава да се функција покрене одмах након што се компонента монтира.
Пример компоненте која користи „watcher“ са опцијом `immediate`:
<script setup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Број се променио са ${oldCount} на ${newCount}`);
},
{ immediate: true }
);
</script>
У овом примеру, „watcher“ ће извршити функцију одмах након иницијализације компоненте и приказати поруку у конзоли. Ово показује да је почетна вредност била недефинисана пре него што је Vue поставио вредност 10 у `count` ref.
Опција `immediate` је корисна када је потребно извршити неку почетну акцију на основу вредности посматраног својства, на пример, при преузимању података из API-ja.
Опција `deep` у Vue „watchers“
Опција `deep` у Vue „watchers“ омогућава дубинско посматрање промена унутар угнежђених објеката или низова. Када је постављена на `true`, „watcher“ може да детектује промене унутар угнежђених својстава.
Пример компоненте са `deep` опцијом:
<script setup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Подаци су промењени`);
},
{ deep: true }
);
// Ово ће покренути "watcher" јер је промена дубока
data.value.length = 43;
</script>
У овом коду, `data` је иницијализован као ref са објектом који садржи својство `length`. Опција `deep` је постављена на `true`, а промена вредности `data.value.length` ће покренути „watcher“ и исписати поруку у конзоли.
Без `deep: true`, „watcher“ не би детектовао промене у објекту. Vue аутоматски прати промене дубоких угнежђења, када се користи `reactive` променљива:
<script setup>
import { reactive, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Подаци су промењени`);
}
);
// Ово ће покренути "watcher" јер мења реактивни објекат
data.length = 43;
</script>
У горњем коду, „watcher“ ће пријавити промену у конзоли јер је променљива `data` дефинисана као реактивни објекат.
Направите боље апликације са Vue „watchers“
Vue „watchers“ вам могу помоћи да постигнете фину контролу над реактивношћу у вашим апликацијама. Они омогућавају праћење промена у својствима података и покретање прилагођене логике као одговор на те промене.
Разумевање када треба користити „watchers“, њихове разлике у односу на „computed properties“, и опција попут `immediate` и `deep`, може значајно побољшати вашу способност креирања Vue апликација са високим степеном реактивности.