Наблюдение с самого начала

Наблюдатель срабатывает только после изменения, а не при запуске приложения. Обычно так и нужно: сохранять только что прочитанное имя незачем. Но некоторые побочные эффекты нужны и с самого начала. Для них есть ещё одна настройка — { immediate: true }. Тогда наблюдатель один раз срабатывает сразу при старте приложения, а потом после каждого изменения, как и раньше:

const name = ref("Анна");

watch(
    name,
    (newValue, oldValue) => {
        console.log(`${oldValue} → ${newValue}`);
    },
    { immediate: true },
);

В консоли сразу при запуске приложения появляется undefined → Анна: при первом срабатывании старого значения ещё нет. Когда имя меняется на Борис, появляется Анна → Борис. Можно указать обе настройки сразу: { deep: true, immediate: true }.

В приложении из этого упражнения есть тёмный режим. Флажок переключает его, а приложение уже запоминает выбор. localStorage хранит только текст, поэтому true сохраняется как "true", а проверка === "true" при запуске приложения снова превращает его в true или false.

Тёмный режим окрашивает всю страницу, то есть <body>, а <body> нет в шаблоне компонента: приложение живёт внутри <div id="app">. Поэтому :class до него не достаёт, и наблюдатель должен сам добавлять и убирать класс через document.body.classList, как в курсе JavaScript.

watchEffect. В Vue есть ещё один вид наблюдателя — watchEffect(). Ему передают только функцию. Он запускается сразу, а потом снова, когда меняется любой реф, который он читает, — так же, как заново вычисляется вычисляемое значение:

watchEffect(() => {
    console.log(`Тёмный режим: ${dark.value}`);
});

Так короче, но с первого взгляда не видно, за чем он наблюдает. В этом курсе используется watch().

Вычисляемое значение или watch? Когда нужно значение для показа, используйте вычисляемое значение: оно возвращает значение, а Vue следит, чтобы оно было актуальным. Когда что-то должно произойти из-за изменения значения, например сохранение, используйте наблюдатель. Наблюдатель, который только задаёт другой реф, как в watch(order, () => { total.value = … }), лучше заменить вычисляемым значением.