Наблюдение за изменениями

Вычисляемое значение вычисляет значение для показа. Но иногда при изменении данных нужно что-то сделать: сохранить их, вывести, куда-то отправить. Такие действия называют побочными эффектами, и для них в Vue есть наблюдатели, которые создают с помощью watch():

import { ref, watch } from "vue";

const category = ref("all");

watch(category, (newValue, oldValue) => {
    console.log(`Сейчас показано: ${newValue} (было: ${oldValue})`);
});

В watch() передают два аргумента. Первый — то, за чем наблюдать: реф или вычисляемое значение, без .value. Второй — функция, которую Vue запускает после каждого изменения, передавая ей новое и старое значения. Когда клиент выбирает чай, в консоли появляется:

Сейчас показано: tea (было: all)

Функция ничего не возвращает: она делает своё дело, и всё. Кроме того, она не запускается при старте приложения, а только после изменения. Часто нужно только новое значение, и тогда старое можно не указывать: (value) => { … }.

Типичный побочный эффект — сохранение в localStorage. В этом упражнении клиент вводит имя для заказа, а приложение должно запомнить его на следующий раз. Наблюдатель сохраняет имя после каждого изменения, а при запуске приложение читает его обратно. Из курса JavaScript вы знаете, что getItem() возвращает null, если ничего не сохранено, поэтому это нужно проверить:

const saved = localStorage.getItem("color");
const color = ref(saved === null ? "зелёный" : saved);

В окне предпросмотра каждое нажатие «Запустить» запускает приложение заново, и пока упражнение у вас открыто, приложение находит то, что сохранило раньше. Кнопка «Очистить сохранённые данные» в консоли удаляет всё это, как будто приложение никогда не открывали.

Типичная ошибка — watch(name.value, …). Так в watch() попадает текст, лежащий в рефе, а не сам реф, а один только текст измениться не может, и Vue не за чем наблюдать. Тогда в консоли появляется предупреждение, которое начинается с [Vue warn]: Invalid watch source.