Composition API

La Composition API è una delle funzionalità principali introdotte in Vue.js 3, progettata per fornire un modo più flessibile e organizzato per scrivere la logica dei componenti Vue. Questa API si basa sul concetto di “composizione” delle funzioni, consentendo dunque di separare la logica correlata in unità riutilizzabili e componibili.

Dunque vediamo subito un esempio sviluppato con la composition API, che rappresenta lo stesso esempio riprodotto con la Option API:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="saluta">Saluta</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: "MessaggioBenvenuto",
  setup() {
    // Definizione della variabile di stato
    const message = ref('Hello World!');

    // Definizione del metodo per salutare
    const saluta = () => {
      alert('Ciao a tutti');
    };

    // Ritorno delle variabili e dei metodi che devono essere resi disponibili nel template
    return { message, saluta };
  }
}
</script>

<style>
p {
  color: blue;
  font-size: 18px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
</style>

In questo esempio, anziché utilizzare il blocco data(), che abbiamo utilizzando nell’esempio precedente sulle Option API, per definire i dati del componente, utilizziamo la funzione setup(). Dopo, all’interno di questa funzione, definiamo le variabili di stato utilizzando la funzione ref(). La funzione ref crea una reattività bidirezionale. La reattività bidirezionale in Vue.js si riferisce alla capacità di mantenere sincronizzati i dati tra la vista e lo stato del componente. In questo modo la funzione si consente al componente di reagire ai cambiamenti delle variabili.

Definiamo poi anche il metodo saluta() all’interno di setup(). Infine, ritorniamo le variabili e i metodi che vogliamo esporre nel template utilizzando return { message, saluta }.

Questa è la forma della Composition API, che offre un modo più flessibile e organizzato per gestire lo stato e i metodi all’interno di un componente Vue 3.

Vantaggi nell’usare la Composition API

Le composition API hanno alcuni principi chiave secondo i quali conviene scegliere questa sintassi. Tra cui:

Riutilizzabilità: Con la Composition API, è possibile incapsulare la logica correlata in funzioni riutilizzabili, rendendo più semplice condividere la logica tra più componenti.

Flessibilità: La Composition API offre una maggiore flessibilità nella gestione dello stato del componente, consentendo l’utilizzo di funzioni come ref, reactive, computed, ecc., che possono essere utilizzate in qualsiasi punto del componente.

Leggibilità e manutenibilità: Utilizzando la Composition API, è possibile comporre funzioni più piccole per creare componenti più leggibili e manutenibili, facilitando la comprensione del comportamento del componente.

Utilizzo della Composition API

Per utilizzare la Composition API in un componente Vue, è necessario dunque importare le funzioni necessarie dal pacchetto Vue. Le principali funzioni utilizzate nella Composition API includono:

ref(): Questa funzione è uilizzata per creare una reattività bidirezionale per una variabile.
reactive(): viene utilizzata per creare un oggetto reattivo, che reagisce ai cambiamenti delle sue proprietà.
computed(): Utilizzata per creare una variabile calcolata basata su altre variabili reattive.
watch(): questa funzione è utilizzata per osservare i cambiamenti di una variabile o di un’espressione complessa.

Chiaramente ci sono tante altre funzioni utili per manipolare e osservare lo stato del componente, ma le citerò più avanti.

In conclusione possiamo dire che la Composition API rappresenta una potente evoluzione per Vue.js, introducendo un approccio più flessibile e organizzato alla scrittura della logica dei componenti. Infatti, questa nuova API promuove la massimizzazione della riutilizzabilità del codice ed una notevole flessibilità nella gestione dello stato del componente. L’obiettivo è quello di favorire la creazione di componenti Vue più leggibili, manutenibili e adattabili, contribuendo così a una migliore scalabilità dell’applicazione.

>> Option API

Counter in Vue.js >>