Vue Academy · Lezione

Funzione setup() e variabili reattive

Il punto di ingresso setup(), ref() per i primitivi, reactive() per gli oggetti, restituzione dei valori

Funzione setup() e variabili reattive è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Il punto di ingresso setup()

La Composition API risiede all’interno di un’opzione speciale del componente chiamata setup(). Viene eseguita una volta, prima della creazione del componente, ed è il punto in cui si dichiarano lo stato reattivo e le funzioni.

Qualunque cosa si return da setup() diventa disponibile nel template.

Creare uno stato reattivo con ref

ref() avvolge un singolo valore (numero, stringa, valore booleano o persino un oggetto) in un contenitore reattivo. Il valore effettivo si trova nella proprietà .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

Creare oggetti reattivi con reactive

reactive() accetta un semplice oggetto e restituisce un proxy profondamente reattivo. Si accede direttamente alle sue proprietà: non esiste .value.

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

Restituire lo stato al template

Tutto ciò che viene restituito da setup() come oggetto diventa un binding del template. In questo caso sia count sia user vengono esposti.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

Rimozione automatica del wrapper nel template

In JavaScript è stato scritto count.value. Nel template si scrive semplicemente count. Vue rimuove automaticamente il wrapper dai ref di primo livello, quindi nel template non si deve mai scrivere .value.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

Aggiungere funzioni

Le funzioni definite in setup() possono leggere e modificare lo stato reattivo. Si ricordi che all’interno di JavaScript si continua a utilizzare .value per i ref.

import { ref } from 'vue'

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

Collegare tutto al template

Si restituisca la funzione e la si colleghi a un evento. Quando si fa clic sul pulsante viene chiamata increment, che modifica il ref, e Vue esegue nuovamente il rendering.

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

Non serve la parola chiave this

All’interno di setup() non esiste this. Si lavora direttamente con le variabili dichiarate. Questo rende il codice più facile da comprendere e più adatto a TypeScript.

Usare this in setup() non restituisce l’istanza del componente.

setup viene eseguito prima della creazione

setup() viene eseguito molto presto, prima di created e prima che l’istanza del componente sia stata configurata completamente. Per questo this non è disponibile e non è ancora possibile accedere al DOM.

Argomenti di setup: props e contesto

setup(props, context) riceve le props risolte come primo argomento e un oggetto di contesto come secondo. Il contesto espone attrs, slots, emit ed expose.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

Un componente completo di esempio

Ecco tutti gli elementi insieme: un ref, un oggetto reattivo, una funzione e i binding restituiti.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

Verifica rapida

Si assicuri di comprendere setup() e le variabili reattive.

Riepilogo

Ha imparato le basi della Composition API:

setup() viene eseguito una volta prima della creazione e restituisce i binding del template.
ref() avvolge un valore: in JavaScript si usa .value.
reactive() avvolge un oggetto: si accede direttamente alle proprietà.
I template rimuovono automaticamente il wrapper dai ref, quindi al loro interno si omette .value.
All’interno di setup() non esiste this.

Domande Frequenti

La lezione «Funzione setup() e variabili reattive» è gratuita?

Sì — il testo completo di «Funzione setup() e variabili reattive» è 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 «Funzione setup() e variabili reattive»?

Il punto di ingresso setup(), ref() per i primitivi, reactive() per gli oggetti, restituzione dei valori 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 2 di 4.

Quanto tempo richiede la lezione «Funzione setup() e variabili reattive»?

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