Découvrez 3 nouveautés de Vue 3.4

Sommaire

1. Présentation
2. Tutoriel vidéo
3. watcheffect() amélioré
4. defineModel() stable
5. Shorthand du v-bind
6. Conclusion

Présentation

Découvrons ensemble les 3 nouveautés de Vue 3.4 : Amélioration du watchEffect(), defineModel() stable et shorthands sont au rendez-vous.

Tutoriel vidéo

watcheffect() amélioré

Lorsqu’un watchEffet()contient une dépendance dont la valeur ne change pas, comme une valeur computed, alors il ne se déclenchera pas.

<script setup lang="ts">
const book = ref({
  pagesCount: 268,
  pagesRead: 0,
});

const evenPagesRead = computed((): boolean => book.value.pagesRead % 2 === 0);

const readPages = () => (book.value.pagesRead = Math.ceil(Math.random() * 268));

watchEffect(() => console.log(`Nombre de pages paires lues : ${evenPagesRead.value}`));
</script>

Lorsque la valeur evenPagesReadretourne true, le watchEffectne se déclenchera que si et seulement si la prochaine valeur de evenPagesRead retourne false.

defineModel() stable

La macro defineModel() était encore en phase d’expérimentation en 3.3, c’est desormais une version stable qui nous attend en 3.4 ! Vous pouvez simplifier vos composants enfants.

<template>
    <input
        v-model="email"
        id="email-address"
        name="email"
        type="email"
        placeholder="Enter your email"
    />
</template>
<script setup lang="ts">
    const email = defineModel('email');
</script>

Shorthand du v-bind

Comme en JavaScript classique, si le nom des variables sont identiques aux props. Vous pouvez simplifier comme suit :

<UserAccount :firstname :age />

Conclusion

Plusieurs nouvelles améliorations, débogues et micro-improvement arrivent avec la version 3.4 mais nous avons fait le tour de ce qui me paraîssait crucial à connaître.

N’hésitez pas à me suivre et à vous abonner à Laravel Jutsu pour plus de contenu !