Расскажи про watch и watchEffect во Vue 3, computed свойства. Как удалить watcher?

Во Vue 3 есть несколько способов реактивно отслеживать изменения данных: watch, watchEffect и computed.

• watch — позволяет следить за изменениями конкретных реактивных источников (например, ref или reactive) и выполнять функцию-обработчик при изменении. Используется, когда нужно реагировать на изменение данных асинхронно или выполнять побочные эффекты.

  import { ref, watch } from 'vue';
  const count = ref(0);
  const stop = watch(count, (newVal, oldVal) => {
    console.log(`count изменился с ${oldVal} на ${newVal}`);
  });
  
  // Чтобы удалить watcher:
  stop();
  

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

  import { ref, watchEffect } from 'vue';
  const count = ref(0);
  const stop = watchEffect(() => {
    console.log(`count сейчас: ${count.value}`);
  });
  
  // Остановить наблюдение:
  stop();
  

• computed — вычисляемое свойство, которое кэширует результат и автоматически обновляется при изменении его реактивных зависимостей. Используется для вычисления значений на основе реактивных данных.

  import { ref, computed } from 'vue';
  const count = ref(1);
  const double = computed(() => count.value * 2);
  console.log(double.value); // 2
  

Удаление watcher: При создании watcher через watch или watchEffect возвращается функция остановки (stop), вызов которой прекращает наблюдение и освобождает ресурсы.