Расскажи про watch и watchEffect во Vue 3, computed свойства. Как удалить watcher?
Answer from AI
sobes.tech AI
Во 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), вызов которой прекращает наблюдение и освобождает ресурсы.