0Pricing
Vue Academy · Lezione

Macro di Vue e proposte della community

Libreria vue-macros, defineModel sperimentale, defineOptions, proposte setupSFC.

Macro di Vue e proposte della community è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Macro del compilatore in script setup

In <script setup>, Vue mette a disposizione le macro del compilatore: funzioni come defineProps e defineEmits che vengono elaborate in fase di compilazione, non importate durante l'esecuzione. Vue 3.4 e le versioni successive ne hanno aggiunte altre, mentre il progetto della community vue-macros ne sperimenta ancora di più.

vue-macros: un terreno di sperimentazione

vue-macros è una libreria della community che distribuisce macro sperimentali in anticipo rispetto a Vue core o anche oltre le funzionalità offerte da Vue core. Alcune idee di successo entrano talvolta nel core: defineModel è nato qui prima di diventare stabile.

// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [VueMacros({ plugins: { vue: vue() } })]
})

defineModel: il vecchio approccio

Prima di defineModel, implementare v-model su un componente significava dichiarare una prop modelValue ed emettere manualmente update:modelValue: un approccio prolisso e soggetto a errori.

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

defineModel: stabile in Vue 3.4

defineModel è diventato stabile in Vue 3.4. Restituisce un ref scrivibile collegato automaticamente alla prop e all'evento di aggiornamento. Leggendolo si ottiene il valore; assegnandogli un valore si emette l'aggiornamento.

<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>

<template>
  <input v-model="model" />
</template>

defineModel con nome e tipizzato

defineModel supporta modelli con nome (v-model:title) e opzioni come required e un tipo, in modo analogo a defineProps.

<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>

Più v-model semplificati

Con i modelli con nome, un componente può esporre in modo ordinato diverse associazioni bidirezionali, cosa che in precedenza richiedeva molte coppie prop/emit.

<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />

<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->

defineOptions

defineOptions (stabile in Vue 3.3) consente di impostare opzioni del componente come name e inheritAttrs direttamente dentro <script setup>, eliminando la necessità di un secondo blocco <script>.

<script setup>
defineOptions({
  name: 'UserCard',
  inheritAttrs: false
})
</script>

Perché name e inheritAttrs sono importanti

La proprietà name di un componente facilita l'uso dei devtools, la ricorsione e le opzioni include/exclude di <KeepAlive>. inheritAttrs: false interrompe il passaggio automatico degli attributi, così può applicare gli attrs a uno specifico elemento interno tramite v-bind="$attrs".

<script setup>
defineOptions({ inheritAttrs: false })
</script>

<template>
  <div class="wrapper">
    <input v-bind="$attrs" />
  </div>
</template>

Altre macro degne di nota

Vue offre anche defineExpose (controlla ciò a cui un ref del componente padre può accedere), defineSlots (tipizza gli slot) e withDefaults (imposta valori predefiniti per le prop basate sui tipi). Conoscere queste macro completa il toolkit di <script setup>.

<script setup lang="ts">
const props = withDefaults(
  defineProps<{ size?: 'sm' | 'lg' }>(),
  { size: 'sm' }
)
defineExpose({ focus })
</script>

Sperimentale o stabile: scelga con attenzione

Le macro stabili del core (defineModel, defineOptions) sono sicure per la produzione. Gli esperimenti di vue-macros sono utili per la prototipazione e l'adozione anticipata, ma le API possono cambiare: le utilizzi con cautela nelle app distribuite.

Seguire le proposte della community

Le nuove idee emergono negli RFC e in vue-macros. Seguirle aiuta ad anticipare la direzione del framework e consente di fornire feedback prima che le funzionalità diventino stabili.

Verifica rapida

Verifichi la Sua comprensione delle macro di Vue.

Riepilogo

Ha imparato a conoscere le macro e le proposte:

  • vue-macros ospita macro sperimentali; alcune entrano nel core
  • defineModel (stabile nella versione 3.4) semplifica v-model nei componenti
  • i modelli con nome e tipizzati consentono più associazioni bidirezionali ordinate
  • defineOptions imposta name/inheritAttrs in <script setup>
  • preferisca le macro stabili in produzione e utilizzi con cautela quelle sperimentali

Domande Frequenti

La lezione «Macro di Vue e proposte della community» è gratuita?

Sì — il testo completo di «Macro di Vue e proposte della community» è 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 «Macro di Vue e proposte della community»?

Libreria vue-macros, defineModel sperimentale, defineOptions, proposte setupSFC. 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 3 di 4.

Quanto tempo richiede la lezione «Macro di Vue e proposte della community»?

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. Modalità Vapor di Vue: ottimizzazione a compile time
  2. Ecosistema Vite: plugin e strumenti
  3. Macro di Vue e proposte della community
  4. Scelta dello stack Vue giusto per il 2025 e oltre
← Torna a Vue Academy