В чём разница между watch и watchEffect во Vue?

В Vue watch и watchEffect используются для отслеживания изменений, но работают по-разному:

• watch — наблюдает за конкретной реактивной переменной или функцией. Нужно явно указать, что именно отслеживать. Позволяет реагировать на изменения с доступом к старому и новому значению.

• watchEffect — автоматически отслеживает все реактивные зависимости, используемые внутри переданной функции. Запускается сразу и каждый раз при изменении любой из зависимостей. Не предоставляет старое значение.

Пример:

import { ref, watch, watchEffect } from 'vue';

const count = ref(0);

// watch
watch(count, (newVal, oldVal) => {
  console.log(`count изменился с ${oldVal} на ${newVal}`);
});

// watchEffect
watchEffect(() => {
  console.log(`count сейчас: ${count.value}`);
});

watch подходит, когда нужно реагировать на конкретное изменение с доступом к предыдущему значению, watchEffect — для автоматического отслеживания и реактивного выполнения кода.