Комментарий пользователя
Здравствуйте! Подскажите, при навигации вижу, что объекты остаются в памяти и события продолжают срабатывать — где обычно ошибаются и как правильно чистить?
Ответ специалиста
Здравствуйте! Частые виновники — глобальные слушатели (window/document), таймеры и подписки на сторонние библиотеки. В Composition API регистрируйте ресурсы в onMounted/onUnmounted или используйте onBeforeUnmount для удаления. watch поддерживает onInvalidate для автоматической очистки при повторном срабатывании.
Удобный паттерн — маленький composable useEventListener, который автоматически отпишет при onUnmounted.
Минимально — ручная регистрация и очистка:
import { onMounted, onBeforeUnmount } from 'vue';
onMounted(() => {
const handler = () => console.log('resize');
window.addEventListener('resize', handler);
onBeforeUnmount(() => window.removeEventListener('resize', handler));
});
Composable useEventListener:
import { onUnmounted } from 'vue';
export function useEventListener(target, event, handler) {
target.addEventListener(event, handler);
onUnmounted(() => target.removeEventListener(event, handler));
}
Для отладки снимайте heap snapshot в DevTools до и после навигации и смотрите retaining tree — это сразу покажет цепочки удержания через слушатели или замыкания. Для RxJS/Observable всегда сохраняйте ссылку на подписку и unsubscribe() в onUnmounted.
