Quali sono i lifecycle hook di Vue?

Question

Accepted Answer

I **lifecycle hook** ti permettono di eseguire codice in momenti specifici della vita di un componente — creazione, montaggio nel DOM, aggiornamento e rimozione. Nell'API Composition sono funzioni che chiami dentro `setup`. ## I hook principali in ordine ```vue ``` ## La sequenza completa ```text setup() runs → reactive state created (no DOM yet) onBeforeMount → just before first render onMounted → DOM ready ★ (fetch data, access $refs, init 3rd-party libs) ── component lives, reacting to changes ── onBeforeUpdate / onUpdated → around re-renders from reactive changes ── component removed ── onBeforeUnmount / onUnmounted → cleanup ★ (timers, listeners, subscriptions) ``` ## I due che usi più spesso - **`onMounted`** — l'elemento esiste nel DOM. Fai qualsiasi cosa che richieda il DOM reale o dovrebbe eseguirsi una sola volta al caricamento: recupera i dati iniziali, misura gli elementi, inizializza una libreria di grafici/mappe, aggiungi event listener. - **`onUnmounted`** — il componente sta partendo. **Pulisci** per prevenire memory leak: cancella intervalli/timeout, rimuovi listener di `window`/`document`, annulla sottoscrizioni o richieste in corso. ```vue ``` L'accoppiamento `onMounted`/`onUnmounted` per setup-and-teardown è uno dei pattern più importanti — dimenticare la pulizia causa leak e listener "fantasma". ## Equivalenti nell'Options API ```text mounted(), updated(), unmounted(), created(), beforeUnmount() ... ``` ## Perché è importante I lifecycle hook sono il modo in cui coordini gli effetti collaterali con l'esistenza di un componente — eseguire la logica di setup quando appare (`onMounted`) e smontarla quando se ne va (`onUnmounted`). Padroneggiare questi due in particolare (e pulire sempre quello che hai impostato) previene memory leak ed è essenziale per integrare il recupero dei dati, i timer e le librerie di terze parti nei componenti Vue.