В Vue.js watch и watchEffect используются для отслеживания изменений реактивных данных, но имеют разные сценарии и особенности.

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

Пример:

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

const count = ref(0);

// watch — следит за count и вызывает коллбек при изменении
watch(count, (newVal, oldVal) => {
  console.log(`count изменился с ${oldVal} на ${newVal}`);
});

// watchEffect — автоматически отслеживает все реактивные зависимости внутри функции
watchEffect(() => {
  console.log(`count сейчас: ${count.value}`);
});

Ключевое отличие:

watch требует явно указать, что именно отслеживать.
watchEffect автоматически отслеживает все реактивные данные, используемые внутри функции.

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

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