0Pricing
Vue Academy · Leçon

Macros Vue et propositions communautaires

Bibliothèque vue-macros, defineModel expérimental, defineOptions et propositions setupSFC

Macros Vue et propositions communautaires est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Macros du compilateur dans script setup

Dans <script setup>, Vue fournit des macros du compilateur — des fonctions comme defineProps et defineEmits qui sont traitées à la compilation et non importées lors de l’exécution. Vue 3.4 et les versions ultérieures en ont ajouté d’autres, et le projet communautaire vue-macros en expérimente encore davantage.

vue-macros : terrain d’expérimentation

vue-macros est une bibliothèque communautaire qui fournit des macros expérimentales avant leur intégration au noyau de Vue, ou au-delà de celui-ci. Certaines idées prometteuses finissent par être intégrées au noyau — defineModel a commencé ici avant de devenir stable.

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

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

defineModel : l’ancienne méthode

Avant defineModel, implémenter v-model sur un composant nécessitait de déclarer une propriété modelValue et d’émettre manuellement update:modelValue — une méthode verbeuse et source d’erreurs.

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

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

defineModel : stable dans Vue 3.4

defineModel est devenu stable dans Vue 3.4. Il renvoie une référence réactive modifiable, automatiquement reliée à la propriété et à l’événement de mise à jour. Sa lecture fournit la valeur ; lui affecter une valeur émet la mise à jour.

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

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

defineModel nommé et typé

defineModel prend en charge les modèles nommés (v-model:title) et des options telles que required ainsi qu’un type, de manière comparable à defineProps.

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

Plusieurs v-model en toute simplicité

Grâce aux modèles nommés, un composant peut exposer proprement plusieurs liaisons bidirectionnelles — ce qui nécessitait auparavant de nombreuses paires propriété/emit.

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

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

defineOptions

defineOptions (stable depuis Vue 3.3) vous permet de définir directement dans <script setup> des options du composant comme name et inheritAttrs, sans avoir besoin d’un second bloc <script>.

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

Pourquoi name et inheritAttrs sont importants

La propriété name d’un composant facilite l’utilisation des outils de développement, la récursion et les options d’inclusion/exclusion de <KeepAlive>. inheritAttrs: false empêche la transmission automatique des attributs, afin que vous puissiez placer les attributs sur un élément interne précis avec v-bind="$attrs".

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

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

Autres macros notables

Vue propose également defineExpose (contrôler ce à quoi une référence parent peut accéder), defineSlots (typer les emplacements) et withDefaults (définir des valeurs par défaut pour les propriétés fondées sur un type). Les connaître complète la boîte à outils de <script setup>.

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

Expérimental ou stable : choisissez judicieusement

Les macros stables du noyau (defineModel, defineOptions) peuvent être utilisées sans risque en production. Les expérimentations de vue-macros sont utiles pour le prototypage et l’adoption précoce, mais les API peuvent changer : encadrez-les soigneusement dans les applications destinées à être livrées.

Suivre les propositions de la communauté

De nouvelles idées apparaissent sous forme de RFC et dans vue-macros. Les suivre vous aide à anticiper l’évolution du framework et vous permet de donner votre avis avant la stabilisation des fonctionnalités.

Vérification rapide

Vérifiez votre compréhension des macros Vue.

Récapitulatif

Vous avez découvert les macros et les propositions :

  • vue-macros héberge des macros expérimentales ; certaines sont ensuite intégrées au noyau
  • defineModel (stable depuis la version 3.4) simplifie le v-model des composants
  • Les modèles nommés et typés permettent plusieurs liaisons bidirectionnelles propres
  • defineOptions définit name/inheritAttrs dans <script setup>
  • Privilégiez les macros stables en production et utilisez les expérimentations avec prudence

Questions Fréquemment Posées

La leçon « Macros Vue et propositions communautaires » est-elle gratuite ?

Oui — le texte complet de « Macros Vue et propositions communautaires » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Macros Vue et propositions communautaires » ?

Bibliothèque vue-macros, defineModel expérimental, defineOptions et propositions setupSFC Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Macros Vue et propositions communautaires » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Mode Vapor de Vue : optimisation à la compilation
  2. Écosystème Vite : plugins et outils
  3. Macros Vue et propositions communautaires
  4. Choisir la bonne pile Vue pour 2025 et au-delà
← Retour à Vue Academy