Дізнайтеся про Vue.js Watchers, щоб покращити розробку веб-додатків

Автор

Основні положення

  • Фреймворки JavaScript, зокрема Vue.js, надають інструменти для спрощення розробки веб-додатків, такі як компонентна архітектура, менеджмент стану та маршрутизація.
  • Спостерігачі (watchers) у Vue.js — це спеціальні функції, які відстежують зміни реактивних даних і дозволяють виконувати певні дії у відповідь на ці зміни.
  • У порівнянні зі спостерігачами, обчислювані властивості (computed properties) є більш лаконічними та зручними для читання, що сприяє підвищенню продуктивності та спрощенню процесу налагодження.

Фреймворки JavaScript стали невід’ємною частиною процесу розробки веб-сайтів. Їхня популярність зумовлена доступними функціями, такими як компонентна структура, управління станом та маршрутизація. Це дозволяє знизити навантаження, витрати часу та зусилля, необхідні для створення веб-додатків з нуля.

Vue.js, один із таких фреймворків, пропонує широкий спектр інструментів для прискорення процесу розробки. Функція спостереження дозволяє контролювати значення змінних та виразів під час виконання програми.

Що таке спостерігачі у Vue?

Спостерігачі Vue.js – це спеціальні функції, які відстежують зміни реактивних властивостей та реагують на них відповідним чином. Вони дозволяють обробляти події та модифікації даних.

Для використання спостерігача, необхідно імпортувати функцію 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>

У цьому прикладі, компонент використовує спостерігач для відстеження змін імені користувача. Шаблон визначає HTML-структуру компонента, включаючи елемент <p>, який відображає значення реактивної змінної user.

Також, шаблон включає кнопку, до якої прив’язана функція changeName, яка змінює ім’я користувача. Коли значення змінної user змінюється, Vue запускає функцію зворотного виклику. Ця функція відображає сповіщення про зміну імені.

Порівняння спостерігачів з обчислюваними властивостями

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

Наприклад, можна обчислити суму віку батька та сина, використовуючи спостерігачів:

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

У цьому компоненті Vue спостерігачі використовуються для обчислення суми віку батька та сина. Для цього створюється нова реактивна змінна total. Реактивну змінну можна створити за допомогою Composition API у Vue.

Потім, використовуються дві функції спостереження для відстеження віку сина і батька. Для кожного віку, сумується нове значення з віком іншого та результат зберігається у загальній реактивній змінній.

Розглянемо той самий сценарій, але з використанням обчислюваних властивостей:

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

Цей фрагмент є більш лаконічним і зручним для читання. Він обчислює суму віку батька та сина і зберігає її в обчислюваній змінній total. Потім, в шаблоні, ця змінна відображається за допомогою інтерполяції.

Хоча можна обчислити суму двох віків за допомогою спостерігачів, краще використовувати для цього обчислювані властивості. Використання спостерігачів у такій ситуації може призвести до сповільнення часу завантаження та ускладнення налагодження, оскільки це потребує більше коду.

Не використовуйте спостерігачі як заміну обчислюваним властивостям. Спостерігачі слід використовувати для моніторингу та реакції на зміни даних, а обчислювані властивості – для отримання нових даних на основі існуючих реактивних даних.

Опція immediate – це конфігурація, яку можна використовувати під час створення спостерігача. Вона визначає, чи повинен спостерігач виконати свій зворотний виклик відразу після того, як Vue змонтує компонент.

Ось приклад компонента, який використовує спостерігач з опцією immediate:

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

const count = ref(10);

watch(
    count,
    (newCount, oldCount) => {
        console.log(`Кількість змінено з ${oldCount} на ${newCount}`);
    },
    { immediate: true }
);
</script>

У наведеному вище прикладі, спостерігач виконає свій зворотний виклик одразу після ініціалізації компонента і виведе в консоль “Кількість змінено з undefined на 10”. Це демонструє, що початкове значення змінної було невизначеним, поки Vue не встановив значення 10 в лічильник ref.

Опція immediate корисна в ситуаціях, коли потрібно виконати початкову дію або ініціалізацію на основі поточного значення спостережуваної властивості. Наприклад, коли потрібно, щоб ваша програма отримувала дані з API при монтуванні компонента.

Опція Deep у спостерігачах Vue

Опція deep, доступна при роботі зі спостерігачами у Vue, дозволяє глибоко спостерігати за змінами у вкладених об’єктах або масивах. Якщо вона встановлена на true, спостерігач може виявляти зміни у вкладених властивостях.

Ось приклад компонента Vue з параметром deep:

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

const data = ref({ length: 42 });

watch(
    data,
    (newData, oldData) => {
        console.log(`Дані змінено"`);
    },
    { deep: true }
);

// Це викличе спостерігач, оскільки є глибокою зміною
data.value.length = 43;
</script>

У цьому прикладі, ініціалізується змінна data з посиланням на об’єкт, який містить властивість length. Опція deep встановлюється на true. Після цього, в консоль виводиться повідомлення про зміну даних, оскільки властивість length була змінена на 43.

Якщо для опції deep встановити значення false, спостерігач не буде виявляти жодних змін в об’єкті. Однак Vue відстежує всі вкладені та глибокі зміни без опції deep, коли ви ініціалізуєте змінну data як реактивний об’єкт:

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

const data = reactive({ length: 42 });

watch(
    data,
    (newData, oldData) => {
        console.log(`Дані змінено"`);
    }
);

// Це викличе спостерігач, оскільки змінює реактивний об'єкт
data.length = 43;
</script>

У цьому випадку, функція спостереження виведе в консоль інформацію про зміну даних, оскільки змінна data є реактивним об’єктом.

Створюйте кращі додатки з Vue Watchers

Спостерігачі Vue можуть допомогти вам досягти високої реактивності у ваших додатках. Вони забезпечують контроль над відстеженням змін у властивостях даних і дозволяють виконувати спеціальну логіку у відповідь на ці зміни.

Розуміння того, коли використовувати спостерігачі, їх відмінностей від обчислюваних властивостей, а також таких опцій як immediate і deep, може значно покращити вашу здатність створювати чутливі додатки Vue.