Комментарий пользователя
Привет! Не уверена, когда выбирать computed, watch или watchEffect. Еще делаю fetch внутри watcher — как правильно отменять предыдущий запрос при быстром изменении зависимости?
Ответ специалиста
Здравствуйте! Коротко: computed для чистых производных значений, watch для побочных эффектов, когда вы хотите следить за конкретной reactive/ref переменной, watchEffect когда нужно отслеживать любое реактивное чтение внутри эффекта.
Для асинхронного кода в watch используйте onInvalidate (передается в callback) — через него удобно вызывать AbortController.abort() или пометить запрос как устаревший.
Пример watch с отменой fetch через onInvalidate:
import { ref, watch } from 'vue';
const q = ref('');
const results = ref([]);
const error = ref(null);
watch(q, (newQ, oldQ, onInvalidate) => {
const ac = new AbortController();
onInvalidate(() => ac.abort()); // отмена при следующем срабатывании
(async () => {
try {
const res = await fetch(`/api/search?q=${encodeURIComponent(newQ)}`, { signal: ac.signal });
if (!res.ok) throw new Error(res.statusText);
results.value = await res.json();
} catch (e) {
if (e.name !== 'AbortError') error.value = e;
}
})();
});
Если нельзя отменять запросы, комбинируйте watch с локальным счетчиком (sequence token) и применяйте ответ только если токен совпадает с актуальным. watchEffect хорош, когда зависимости очевидны из тела эффекта и вам не хочется перечислять вузы вручную.
Присоединяйтесь к нашему сообществу и развивайтесь вместе с нами.
