Poiché i creatori di Vue hanno annunciato che Vue 2 raggiungerà la fine del suo ciclo di vita entro il 31 dicembre 2023, gli sviluppatori sono incoraggiati a passare a Vue 3.
Con questa transizione arriva l’API Composition, una funzionalità che offre un approccio più modulare, dichiarativo e sicuro per la creazione di applicazioni Vue.
Sommario:
Cos’è l’API di composizione?
L’API Composition rappresenta un cambio di paradigma nella scrittura dei componenti Vue dall’oggetto Options. Questo stile di sviluppo adotta un approccio più dichiarativo, consentendoti di concentrarti sulla creazione della tua app Vue astraendo i dettagli di implementazione.
Motivazione per l’API di composizione
I creatori di Vue hanno riconosciuto le sfide legate alla creazione di applicazioni Web complesse con l’oggetto Opzioni. Con la crescita dei progetti, la gestione della logica del componente è diventata meno scalabile e più difficile da mantenere, soprattutto in ambienti collaborativi.
L’approccio tradizionale agli oggetti Opzioni spesso comportava molte proprietà dei componenti, rendendo il codice difficile da comprendere e gestire.
Inoltre, il riutilizzo della logica dei componenti tra componenti diversi diventava complicato. La logica frammentata all’interno dei vari hook e metodi del ciclo di vita ha inoltre aggiunto complessità alla comprensione del comportamento complessivo di un componente.
Vantaggi dell’API di composizione
L’API Composition offre numerosi vantaggi rispetto all’API Options.
1. Prestazioni migliorate
Vue 3 introduce un nuovo meccanismo di rendering chiamato Sistema di reattività basato su proxy. Questo sistema fornisce prestazioni migliori riducendo il consumo di memoria e migliorando la reattività. Il nuovo sistema di reattività consente a Vue 3 di gestire più alberi di componenti giganti in modo più efficiente.
2. Dimensioni del pacco più piccole
Grazie alla base di codice ottimizzata e al supporto per lo scuotimento degli alberi, Vue 3 ha una dimensione del bundle inferiore rispetto a Vue 2. Questa riduzione delle dimensioni del bundle porta a tempi di caricamento più rapidi e prestazioni migliorate.
3. Miglioramento dell’organizzazione del codice
Sfruttando l’API Composition, puoi organizzare il codice del tuo componente in funzioni più piccole e riutilizzabili. Ciò favorisce una migliore comprensione e manutenzione, soprattutto per componenti grandi e complessi.
4. Riutilizzabilità di componenti e funzioni
Le funzioni di composizione possono essere facilmente riutilizzate tra diversi componenti, facilitando la condivisione del codice e la creazione di una libreria di funzioni riutilizzabili.
5. Migliore supporto TypeScript
L’API Composition fornisce un supporto TypeScript più completo, consentendo un’inferenza del tipo più accurata e un’identificazione più semplice degli errori relativi al tipo durante lo sviluppo.
Confronto tra l’oggetto Opzioni e l’API di composizione
Ora che hai compreso la teoria alla base della Composition API, puoi iniziare a usarla nella pratica. Per comprendere i vantaggi dell’API Composition, confrontiamo alcuni aspetti chiave di entrambi gli approcci.
Dati reattivi in Vue 3
I dati reattivi sono un concetto fondamentale in Vue che consente alle modifiche dei dati nell’applicazione di attivare automaticamente gli aggiornamenti nell’interfaccia utente.
Vue 2 basava il suo sistema reattivo sul metodo Object.defineProperty e faceva affidamento su un oggetto dati contenente tutte le proprietà reattive.
Quando hai definito una proprietà dati con l’opzione data in un componente Vue, Vue ha automaticamente inserito ciascuna proprietà nell’oggetto dati con getter e setter, una nuova funzionalità ECMA Script (ES6).
Questi getter e setter hanno tracciato le dipendenze tra le proprietà e aggiornato l’interfaccia utente quando hai modificato qualsiasi proprietà.
Ecco un esempio di come crei dati reattivi in Vue 2 con l’oggetto Opzioni:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template><script>
export default {
data() {
return {
count: 0,
};
},methods: {
increment() {
this.count++;
},
},
};
</script>
Il blocco di codice mostra come creare variabili in Vue 2. Vue rende automaticamente reattive le variabili definite nell’oggetto dati. Le modifiche apportate a una proprietà dei dati (conteggio) causeranno un aggiornamento nell’interfaccia utente dell’applicazione.
Inoltre, hai utilizzato l’oggetto metodi per definire le funzioni JavaScript utilizzate all’interno del componente. In questo esempio, lo snippet definisce il metodo incrementa(), che incrementa il valore della variabile count di 1.
Quando si scrivevano funzioni come metodi in Vue 2, era necessario utilizzare anche la parola chiave this (this.count++). La parola chiave this consente di puntare a variabili nell’oggetto dati. L’omissione della parola chiave this genererà un errore quando Vue monta il componente.
Il sistema di reattività basato su proxy di Vue 3 utilizza proxy JavaScript per ottenere reattività, che offre miglioramenti significativi delle prestazioni e una migliore gestione delle dipendenze reattive.
Utilizzare le funzioni ref o reactive per definire i dati reattivi in Vue 3. La funzione ref crea un singolo riferimento reattivo a un valore, mentre la funzione reactive crea un oggetto reattivo contenente più proprietà.
Ecco un esempio di come creare dati reattivi con la funzione ref in Vue 3:
<script setup>
import { ref } from 'vue';const count = ref(0);
function increment() {
count.value++;
}
</script><template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
Per utilizzare la funzione ref() in Vue 3, devi prima importarla dal pacchetto vue. La funzione ref() crea riferimenti reattivi alle variabili.
L’esempio del blocco di codice crea la variabile count con la funzione ref() e imposta il suo valore iniziale su 0. La funzione ref() restituisce un oggetto con una proprietà value. Questa proprietà value contiene il valore effettivo del conteggio.
La direttiva @click viene utilizzata per gestire gli eventi clic in Vue.
Definisci le funzioni necessarie nel tuo componente all’interno del blocco di impostazione dello script. Vue 3 ha sostituito la sintassi dei metodi di definizione delle funzioni in Vue 2 con normali funzioni JavaScript.
Ora puoi accedere alle variabili reattive che hai definito con la funzione ref() allegando un metodo valore al nome della variabile. Ad esempio, il blocco di codice utilizza count.value per fare riferimento al valore della variabile count.
La funzione calcolata in Vue 3
La funzione Computed è un’altra funzionalità di Vue che consente di definire valori derivati in base a dati reattivi. Le proprietà calcolate vengono aggiornate automaticamente ogni volta che le relative dipendenze cambiano, garantendo che il valore derivato sia sempre aggiornato.
In Vue 2, definisci il comportamento calcolato con l’opzione calcolata all’interno di un componente. Ecco un esempio:
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template><script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
incrementCount() {
this.count++;
}
}
};
</script>
Nell’esempio precedente, la proprietà calcolata doubleCount dipende dalla proprietà count data. Ogni volta che la proprietà count cambia, Vue ricalcola la proprietà doubleCount.
In Vue 3, l’API Composition introduce un nuovo modo di definire le proprietà calcolate utilizzando la funzione calcolata. Ecco come appare:
<script setup>
import { ref, computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);const incrementCount = () => {
count.value++;
};
</script><template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>
È necessario importare la funzione calcolata dal pacchetto vue prima di poter utilizzare la funzione.
Hai definito un riferimento calcolato doubleCount nel blocco di codice precedente con la funzione calcolata. Vue 3 si riferisce alle proprietà calcolate come riferimenti calcolati, evidenziando la loro dipendenza da variabili reattive.
La funzione calcolata accetta una funzione getter come argomento, che calcola il valore derivato in base ai dati reattivi. In questo caso, il riferimento calcolato doubleCount restituisce la moltiplicazione della variabile reattiva del conteggio per 2.
Tieni presente che i blocchi di codice basati sull’API Composition sono più leggibili e concisi rispetto a quelli scritti con l’oggetto Options.
Impara a creare direttive personalizzate in Vue
L’API Vue 3 Composition presenta un approccio potente e flessibile all’organizzazione e al riutilizzo del codice nei componenti Vue. Puoi creare applicazioni Vue più modulari e gestibili con l’API Composition.
Vue offre anche funzionalità extra per massimizzare la produttività durante lo sviluppo di app Web. Puoi imparare a creare direttive personalizzate per riutilizzare determinate funzioni in diverse parti della tua applicazione Vue.