La macro defineModel de Vue simplifie v-model dans les composants personnalisés

Vue.js, le framework JavaScript progressif, a introduit dans sa version 3.4 la macro defineModel() permettant aux composants personnalisés de supporter la directive v-model de liaison bidirectionnelle, sans prop modelValue ni émission d’update:modelValue. Oleh Hladkov, développeur Vue et auteur sur Dev.to, l’illustre par un composant modal utilisant l’élément natif <dialog>. Les développeurs peuvent ainsi écrire simplement «<MyModal v-model=« isModalOpen »>» pour contrôler la visibilité avec une unique liaison réactive. Cette innovation, issue du Composition API en <script setup>, élimine le code redondant traditionnel. Autrefois, implémenter v-model nécessitait de définir une prop modelValue, de surveiller ses changements et d’émettre update:modelValue, ce qui alourdissait chaque composant réutilisable. defineModel() gère automatiquement la synchronisation et retourne un ref directement lié au parent, rendant les API de composants plus intuitives et concises. Dans l’exemple détaillé de Hladkov, le fichier MyModal.vue déclare «const model = defineModel();» et emploie «model.value» pour activer le modal via «dialogRef.value.showModal(model.value)». Du côté parent dans App.vue, un simple ref «isModalOpen» est lié par v-model à un bouton d’ouverture. Une démonstration interactive sur StackBlitz met en évidence cette élégance : une ligne pour l’état, une API unifiée, sans synchronisation manuelle. Le journal des changements (changelog) du cœur de Vue.js confirme l’ajout de cette macro dans la version 3.4. Les développeurs en tirent un gain significatif en lisibilité, particulièrement pour des composants courants comme les interrupteurs, cases à cocher ou formulaires. Cela facilite grandement la maintenance et l’évolution de projets complexes, renforçant l’attractivité de Vue.js dans l’écosystème des frameworks front-end.