Фото від Ana на Unsplash
Передумови
- Переконайтесь, що ви встановили Node.js версії 18.3+
- Вам потрібно створити додаток Vue, дотримуючись цього посібника.
Вступ
Хочете спостерігати за реактивним станом і виконувати деякий код? У Vue є функція для цього, яка називається "спостерігачі" (watchers). Вони виконуються, коли змінюється реактивний стан.
Watch
Watch можна використовувати для спостереження за окремим реактивним станом. Це рекомендований спосіб спостереження за реактивним станом, оскільки він явно вказує, за яким станом ви хочете спостерігати.
В шаблоні
Напишемо простий лічильник, як показано нижче:
У скрипті
На рядку 11 ми використовуємо watch для спостереження за станом count. Потрібно вказати, за яким станом спостерігати, і надати функцію зворотного виклику (callback).
Запуск проєкту
Коли ви натискаєте кнопку "Increment", спостерігач автоматично запуститься і виведе повідомлення в консоль.
Миттєвий запуск
Спостерігач запускається, коли змінюється стан. Однак, якщо потрібно виконати спостерігач одразу після монтування компонента, ви можете використати immediate: true, як показано нижче:
watch(
count,
() => {
console.log('count changed')
},
{ immediate: true },
)
WatchEffect
Подібно до Watch, але WatchEffect можна використовувати для спостереження за кількома реактивними станами. Однак використовуйте його з обережністю, оскільки може бути складно визначити, які стани змінилися і чому був викликаний WatchEffect.
В шаблоні
Напишемо кілька полів введення та кнопку відправки, як показано нижче.
У скрипті
На рядку 15 ви можете побачити, як ми використовуємо watchEffect. watchEffect спрацьовує, якщо змінюється будь-який зі станів name, email або block.
Запуск проєкту
Напишіть "John" і "[email protected]" у поля вводу, і ви побачите текст "You are blocked".
Готово
Використовуйте спостерігачі (watchers), якщо хочете відстежувати стан і виконувати деякий код.
Попередній розділ: Template Refs
Наступний розділ:
Перекладено з: Watch and WatchEffect