Hook-urile onActivated() și onDeactivated() în Vue 3 în Vue.js & Nuxt

Gestionarea componentelor memorate cu onActivated și onDeactivated

Atunci când o componentă este învăluită în <KeepAlive>, ea nu mai este demontată (unmounted) la comutarea pe alt tab sau vizualizare, ci este păstrată vie în memorie. În consecință, onMounted și onUnmounted nu se mai apelează la revenire.

Pentru a gestiona logica de reactivare (reîmprospătare date) sau suspendare (oprire animații), Vue oferă:

• onActivated(): apelat de fiecare dată când componenta revine pe ecran.
• onDeactivated(): apelat când componenta este ascunsă în cache.

<script setup>
import { onActivated, onDeactivated } from 'vue';

onActivated(() => {
    console.log('Tab-ul a revenit în prim-plan. Reîmprospătăm datele...');
});

onDeactivated(() => {
    console.log('Tab-ul a fost ascuns și salvat în cache.');
});
</script>