Vue Academy · Lezione

Perché la Composition API?

Limiti della Options API, problema del riutilizzo della logica, vantaggi della Composition API

Perché la Composition API? è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

I due modi di scrivere Vue

Vue 3 offre due stili per scrivere la logica dei componenti: la Options API e la Composition API. Entrambe producono lo stesso risultato finale, ma organizzano il codice in modo molto diverso.

Comprendere i compromessi consente di scegliere lo strumento giusto e di leggere con sicurezza i codebase esistenti.

Come organizza il codice la Options API

La Options API divide un componente in sezioni fisse: data, computed, methods, watch e gli hook del ciclo di vita. Ogni parte di una funzionalità si trova in una sezione diversa.

Per una sola funzionalità semplice potrebbe essere necessario intervenire in quattro blocchi distinti del file.

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}

Il problema: le responsabilità vengono disperse

Quando un componente cresce, la logica di una singola responsabilità (ad esempio una casella di ricerca) viene distribuita tra data, methods, computed e watch. Per seguire una sola funzionalità, si deve continuamente scorrere il file verso l’alto e verso il basso.

Questo viene chiamato problema della frammentazione.

Composition API: raggruppare per funzionalità

La Composition API consente di riunire tutto il codice relativo a una singola responsabilità logica. Lo stato reattivo, i valori derivati e le funzioni che li modificano si trovano uno accanto all’altro.

Si può leggere dall’alto verso il basso e vedere un’intera funzionalità in un unico punto.

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    function increment() { count.value++ }
    return { count, doubled, increment }
  }
}

A confronto

Si noti come il secondo esempio mantenga insieme count, il relativo doubled derivato e increment. Nella Options API queste tre parti si trovavano in tre sezioni separate.

Options API: organizzata per tipo di opzione
Composition API: organizzata per responsabilità logica

Riutilizzare la logica: i mixin (il metodo precedente)

Prima della Composition API, lo strumento principale per riutilizzare la logica erano i mixin. Un mixin unisce le proprie opzioni a quelle di un componente.

Tuttavia, i mixin presentano problemi concreti: conflitti tra nomi, origine poco chiara delle proprietà e dipendenze implicite tra i mixin.

const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

export default {
  mixins: [counterMixin]
  // Where did count come from? Not obvious.
}

Riutilizzare la logica: i composable (il metodo attuale)

Un composable è semplicemente una funzione che utilizza le API di reattività e restituisce uno stato reattivo. Lo si chiama come qualsiasi funzione, quindi l’origine di ogni valore è esplicita.

Nessuna fusione automatica e nessun conflitto di nomi nascosto.

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

Utilizzare un composable

Importare e chiamare il composable rende evidente che count e increment provengono da useCounter. È anche possibile rinominarli durante la destrutturazione per evitare conflitti.

import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

Perché i composable sono migliori dei mixin

Origini esplicite — ogni valore proviene da una chiamata di funzione visibile.
Nessun conflitto di nomi — è possibile destrutturare e rinominare liberamente.
Componibili — un composable può chiamarne un altro.
Favorevoli al tipaggio — TypeScript inferisce automaticamente i tipi restituiti.

TypeScript e gli strumenti funzionano meglio

Poiché la Composition API è costruita con semplici funzioni e variabili, TypeScript può inferire i tipi senza strumenti speciali. Non esiste un this con un tipo scritto manualmente da mantenere e gli editor offrono un completamento automatico accurato.

Quando utilizzare l’una o l’altra

La Composition API è particolarmente adatta ai componenti medi e grandi e a qualsiasi logica che si desideri riutilizzare. La Options API è comunque perfettamente valida e può risultare chiara nei componenti molto piccoli.

Nel nuovo codice Vue 3 si preferisce in genere la Composition API, soprattutto con <script setup>, che si incontrerà tra poco.

Verifica rapida

Verifichi ciò che ha imparato sul motivo per cui esiste la Composition API.

Riepilogo

In questa lezione ha imparato:

La Options API organizza il codice per tipo di opzione, distribuendo una funzionalità tra più sezioni.
La Composition API raggruppa il codice per responsabilità logica.
I mixin riutilizzano la logica, ma causano conflitti di nomi e rendono poco chiare le origini.
I composable sono semplici funzioni che restituiscono uno stato reattivo: espliciti, privi di conflitti e componibili.

Domande Frequenti

La lezione «Perché la Composition API?» è gratuita?

Sì — il testo completo di «Perché la Composition API?» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Perché la Composition API?»?

Limiti della Options API, problema del riutilizzo della logica, vantaggi della Composition API Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Perché la Composition API?»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy