0Pricing
Vue Academy · Lezione

Introduzione a script setup

Come viene compilato in setup(), import automatici, binding di livello superiore disponibili nel template

Introduzione a script setup è 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.

Una Composition API più pulita

<script setup> è zucchero sintattico a tempo di compilazione per la Composition API. Elimina il codice ripetitivo, così i componenti a file singolo assomigliano a semplice JavaScript con variabili reattive.

Da setup() a script setup

La forma classica richiede un export default, una funzione setup() e un return esplicito. La confronti con la versione <script setup>.

<!-- classic -->
<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

La versione script setup

Con <script setup> non servono né un oggetto contenitore né un'istruzione return. Le variabili al livello superiore vengono esposte automaticamente al template.

<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Nessun return esplicito necessario

Il compilatore tratta ogni binding al livello superiore — variabili, funzioni e import — come disponibile nel template. Scrive meno codice e non corre il rischio di dimenticare un return.

Anche le funzioni al livello superiore sono disponibili

Definisca una funzione al livello superiore e la associ direttamente al template. Non è necessario restituirla con return.

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

I componenti importati si registrano automaticamente

Con l'API classica doveva elencare i componenti in un'opzione components. Con <script setup>, è sufficiente importare un componente per poterlo usare nel template.

<script setup>
import BaseButton from './BaseButton.vue'
</script>

<template>
  <BaseButton />
</template>

Viene comunque compilato in setup()

Internamente, il compilatore trasforma <script setup> in una normale funzione setup(). Ottiene lo stesso comportamento e le stesse prestazioni, ma con un modo di scrivere il codice più pulito.

Aggiungere TypeScript con lang ts

Abiliti TypeScript aggiungendo lang="ts" al tag. Potrà quindi tipizzare le variabili, usare i generics nelle macro del compilatore e ottenere un'inferenza completa dei tipi.

<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>

Macro del compilatore

All'interno di <script setup> sono disponibili macro speciali del compilatore come defineProps, defineEmits e defineExpose. Non vengono importate: il compilatore le riconosce. Le analizzerà nelle prossime lezioni.

Combinare con un blocco script normale

A volte servono opzioni eseguite una sola volta nell'ambito del modulo, come un nome personalizzato per il componente. Può aggiungere un blocco <script> normale accanto a <script setup>.

<script>
export default { name: 'MyComponent' }
</script>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Perché i team preferiscono script setup

  • Meno codice ripetitivo: nessun oggetto contenitore e nessun return.
  • Registrazione automatica dei componenti.
  • Migliori prestazioni a runtime grazie all'analisi a tempo di compilazione.
  • Supporto eccellente per TypeScript.

È lo stile consigliato per i componenti Vue 3 a file singolo.

Verifica rapida

Verifichi di aver compreso script setup.

Riepilogo

Ha appreso gli aspetti essenziali di <script setup>:

  • È zucchero sintattico a tempo di compilazione sopra setup().
  • Nessun return esplicito: i binding al livello superiore vengono esposti automaticamente.
  • I componenti importati vengono registrati automaticamente.
  • Aggiunga lang="ts" per usare TypeScript.
  • Le macro del compilatore come defineProps sono disponibili senza import.

Domande Frequenti

La lezione «Introduzione a script setup» è gratuita?

Sì — il testo completo di «Introduzione a script setup» è 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 «Introduzione a script setup»?

Come viene compilato in setup(), import automatici, binding di livello superiore disponibili nel template 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 «Introduzione a script setup»?

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

  1. Introduzione a script setup
  2. defineProps e defineEmits
  3. defineExpose e useAttrs
  4. Importazione e utilizzo dei composable in script setup
← Torna a Vue Academy