Les améliorations de la Composition API dans Vue.js 3.4
Contexte : Imaginez que vous développiez une application simple pour noter des tâches quotidiennes. Vous souhaitez que l’interface reste fluide, même avec une liste qui s’allonge. La version 3.4 de Vue.js, récemment sortie, améliore la Composition API pour rendre cela plus facile. Elle optimise les objets réactifs et introduit defineModel pour simplifier les formulaires. Voici un exemple clair pour vous.
Exemple concret :
// Dans un composant TacheForm.vue
import { ref, defineModel } from 'vue';
export default {
name: 'TacheForm',
setup() {
const tache = defineModel('tache', { default: '' }); // Liaison avec v-model
const ajouterTache = () => {
console.log('Nouvelle tâche :', tache.value);
tache.value = ''; // Réinitialisation rapide
};
return { tache, ajouterTache };
},
};
Avec defineModel, vous connectez facilement le champ à l’application, et les optimisations assurent une réactivité fluide.
Les améliorations de la Composition API dans Vue.js 3.4
Contexte : Imaginez que vous développiez une application simple pour noter des tâches quotidiennes. Vous souhaitez que l’interface reste fluide, même avec une liste qui s’allonge. La version 3.4 de Vue.js, récemment sortie, améliore la Composition API pour rendre cela plus facile. Elle optimise les objets réactifs et introduit defineModel pour simplifier les formulaires. Voici un exemple clair pour vous.
Exemple concret :
// Dans un composant TacheForm.vue
import { ref, defineModel } from 'vue';
export default {
name: 'TacheForm',
setup() {
const tache = defineModel('tache', { default: '' }); // Liaison avec v-model
const ajouterTache = () => {
console.log('Nouvelle tâche :', tache.value);
tache.value = ''; // Réinitialisation rapide
};
return { tache, ajouterTache };
},
};
Avec defineModel, vous connectez facilement le champ à l’application, et les optimisations assurent une réactivité fluide.