Hai un progetto Vue 2 che tieni in piedi da tre anni. Funziona, ma ogni volta che aggiungi una nuova funzionalità ti chiedi se sia il caso di riscriverlo. Oppure stai per iniziare un nuovo frontend e vuoi sapere se vale la pena puntare su Vue 3 o restare sulla versione che conosci.
Noi, di Meteora Web, abbiamo accompagnato progetti Vue da quando era ancora la versione 2. E abbiamo visto sia il bello che i limiti. Con Vue 3 il framework è stato riscritto da zero, e le differenze non sono solo estetiche. Cambia il modo in cui scriviamo componenti, gestiamo lo stato e ottimizziamo le performance. In questa guida vediamo le differenze concrete, con esempi reali, e ti aiutiamo a decidere se e come migrare.
Il motore: Proxy vs Object.defineProperty
La differenza più profonda tra Vue 2 e Vue 3 sta nel sistema di reattività. Vue 2 usava Object.defineProperty per intercettare letture e scritture sulle proprietà di un oggetto. Questo funziona, ma ha limiti importanti:
- Non rileva l'aggiunta di nuove proprietà (devi usare
Vue.set). - Non funziona bene con array modificati per indice o lunghezza (devi usare metodi
splice). - Performance cala su oggetti grandi, perché ogni proprietà viene convertita singolarmente.
Vue 3 adopera il Proxy API nativo di JavaScript. Un Proxy avvolge l'intero oggetto e intercetta qualsiasi operazione: lettura, scrittura, cancellazione, enumerazione. Nessun limite. Niente più Vue.set. Aggiungi una proprietà quando vuoi, modificare array per indice funziona subito.
Esempio pratico: reattività a confronto
// Vue 2 – attenzione all'aggiunta di proprietà
data() {
return { user: { name: 'Mario' } }
},
methods: {
addAge() {
// Non funziona: non è reattivo
this.user.age = 30;
// Devi usare Vue.set
Vue.set(this.user, 'age', 30);
}
}
// Vue 3 – con Proxy funziona sempre
import { reactive } from 'vue';
export default {
setup() {
const user = reactive({ name: 'Mario' });
function addAge() {
user.age = 30; // reattivo senza trucchi
}
return { user, addAge };
}
}
Questo significa meno bug, meno boilerplate e una gestione dello stato più naturale. La differenza si sente quando lavori con oggetti nested o array lunghi. Noi abbiamo risolto diversi progetti legacy proprio passando a Vue 3: numeri alla mano, il sistema di reattività è circa 2-4 volte più veloce in scenari di aggiornamenti frequenti.
Options API vs Composition API: non obbligatorio, ma rivoluzionario
Vue 3 introduce la Composition API come alternativa alla classica Options API. Non è obbligatoria: puoi continuare a scrivere componenti con data, methods, computed anche in Vue 3. La differenza vera è quando inizi a gestire logiche complesse.
Con la Options API la logica è frammentata per opzioni: se hai tre funzionalità diverse in un componente, mischi i loro data, methods e watch in sezioni separate. Diventa difficile riutilizzare porzioni di logica tra componenti. La Composition API ti permette di raggruppare la logica per feature usando funzioni setup e composables.
Componente contatore: Options vs Composition
<!-- CounterOptions.vue – Vue 2 style anche in Vue 3 -->
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
<script>
export default {
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
</script>
<!-- CounterComposition.vue – Vue 3 Composition API -->
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => count.value++;
</script>
La sintassi <script setup> è la più usata in Vue 3. Meno boilerplate, ref invece di data, funzioni direttamente dentro. Il vero vantaggio arriva quando estrai la logica in un composable:
// useCounter.js
export function useCounter(initialValue = 0) {
const count = ref(initialValue);
const increment = () => count.value++;
const decrement = () => count.value--;
return { count, increment, decrement };
}
// in un componente
<script setup>
import { useCounter } from './useCounter';
const { count, increment } = useCounter(10);
</script>
Questo pattern è simile agli hooks di React (se vuoi approfondire, abbiamo una guida su React Fondamentali). La differenza: in Vue la reattività è automatica, non servono dipendenze esplicite.
Quando conviene la Composition API? Appena il componente ha più di una logica indipendente, o quando vuoi riutilizzare funzionalità tra più componenti. Ad esempio, gestione di form, dati da API, timer. Se hai componenti semplici come un pulsante, la Options API va benissimo.
Ecosistema: Vite, Pinia, Vue Router 4
Con Vue 3 è cambiato anche l'ecosistema. Vite è il nuovo bundler (sostituisce Vue CLI). Noi lo usiamo in ogni progetto Vue 3: hot reload istantaneo, build velocissime, configurazione minima. Se stai migrando, preparati a passare da Webpack a Vite.
Pinia ha soppiantato Vuex come store ufficiale. Più leggera, full TypeScript, nessuna necessità di mutations (si modifica lo stato direttamente). Vue Router 4 è simile al Router 3, ma integrato con Composition API e tipizzato.
Un aspetto pratico: molte librerie di terze parti (UI framework, validazione) sono state riscritte per Vue 3. Se usi qualcosa come Vuetify o Element UI, verifica la compatibilità. Alcuni plugin hanno versioni separate (es. BootstrapVue per Vue 2, bootstrap-vue-next per Vue 3).
Performance e bundle size: numeri concreti
Vue 3 ha un runtime più piccolo e veloce. Dati ufficiali:
- Bundle size gzipped: Vue 2 ~22 KB, Vue 3 ~13 KB (con Tree-shaking).
- Velocità di rendering: fino a 1.3-2x più veloce in virtual DOM diffing e patch.
- Memoria: minore allocazione grazie alla riscrittura del sistema di reattività.
Noi abbiamo misurato su un progetto e-commerce con Vue 2: la parte di frontend pesava circa 120 KB dopo compressione. Portandolo a Vue 3, senza modifiche sostanziali se non la reattività e il cambio di store, siamo scesi a 80 KB. Per un utente su connessione mobile, la differenza è di 1-2 secondi in meno di caricamento.
Nuove feature: Teleport, Fragments, Suspense, v-model multipli
Vue 3 introduce feature che in Vue 2 richiedevano workaround:
- Teleport: sposta un contenuto in un altro nodo del DOM (utile per modali, tooltip).
- Fragments: un componente può avere più nodi radice senza un wrapper div.
- Suspense: gestione di componenti asincroni (fetch dati, lazy loading).
- v-model multipli: puoi usare più
v-modelsu un singolo componente (es.v-model:name,v-model:email).
Niente di obbligatorio, ma semplificano tantissimo alcune casistiche comuni.
Quando migrare (e quando no)
Non ogni progetto Vue 2 ha bisogno di essere migrato subito. La nostra regola pratica:
- Nuovo progetto? Sempre Vue 3. L'ecosistema è maturo, le performance migliori, la Composition API è il futuro.
- Progetto esistente di grandi dimensioni (migliaia di componenti): Valuta il costo della migrazione. Se il progetto è stabile e non c'è un problema di performance o di mantenibilità, potresti rimandare. Inizia a usare
@vue/compat(Vue 3 con compatibilità Vue 2) per un passaggio graduale. - Progetto che necessita di nuovi sviluppi frequenti: Migrare conviene se vuoi sfruttare le nuove feature o se hai bisogno di TypeScript nativo (Vue 3 ha supporto integrato migliore).
- Progetto che usa librerie non compatibili con Vue 3: controlla se esistono alternative Vue 3. Se le librerie sono critiche e non aggiornate, potresti essere bloccato per anni.
Noi, di Meteora Web, abbiamo affrontato entrambi i casi. In un progetto di gestione ordini per una PMI, siamo partiti con @vue/compat riscrivendo circa 40 componenti su 200; il resto è rimasto in stile Vue 2 fino alla migrazione completa. Ci ha permesso di usare Vite e Proxy fin da subito senza bloccare lo sviluppo.
Come migrare: passo passo
Ecco l'approccio che consigliamo:
- Passa a Vue 3 con compat mode: installa
@vue/compat(npm install vue@3 @vue/compat) e configuracreateVueAppconruntimeCompat: { MODE: 2 }. Tutto funziona come prima, ma con il motore Vue 3 sotto. - Aggiorna le dipendenze: Vue Router 4, Pinia (o Vuex 4), librerie terze.
- Sostituisci Vue CLI con Vite: crea un progetto Vite, sposta la struttura, configura alias e plugin. Le build diventano immediatamente più veloci.
- Riscrivi componenti uno per uno: scegli i più critici (quelli con logica complessa) per passare a Composition API. Non toccare i componenti semplici se non necessario.
- Rimuovi Vue.set e Vue.delete: non servono più. Sostituisci con assegnazioni dirette.
- Rimuovi i wrapper div inutili grazie ai fragments.
- Testa e fai audit: controlla che il bundle sia più piccolo e le performance migliori.
# Esempio di installazione compat mode
npm i vue@3 @vue/compat vue-router@4 pinia
# Vite
npm create vite@latest my-project -- --template vue
Per un esempio pratico di configurazione di un progetto Vue 3 con Laravel, leggi la nostra guida su Laravel 12 (spesso i due framework viaggiano insieme).
In sintesi – cosa fare adesso
- Se stai iniziando un nuovo progetto: usa Vue 3 con
<script setup>, Vite e Pinia. Non guardare indietro. - Se hai un progetto Vue 2 stabile: apri la console e controlla il bundle size attuale. Se supera i 100 KB gzippati, il passaggio ha un ritorno misurabile in velocità.
- Fai un audit delle dipendenze: Elenca ogni plugin Vue 2 che usi e cerca la versione Vue 3. Se trovi buchi, pianifica la sostituzione.
- Prova compat mode: clona il progetto, installa
@vue/compate vedi se tutto funziona. Se sì, hai già un piano graduale. - Non migrare tutto in un colpo solo: usa l'approccio a componenti. Inizia da quelli che ti danno più fastidio.
Vue 3 non è una moda: è un salto di qualità tecnico. Noi lo usiamo ogni giorno, e la differenza si vede nei progetti che sfornano. Se hai domande o vuoi un confronto sul tuo caso specifico, scrivici – siamo qui per aiutare le imprese a fare la scelta giusta, non quella più facile.
Sponsored Protocol
