Un guide complet sur le codage, l'optimisation des performances et les améliorations de l'écosystème dans Vue 3 et Vue 2

Résumé : Vue.js est un framework JavaScript populaire et sa dernière version, Vue 3, diffère de sa version précédente, Vue 2, à bien des égards. Ce blog se concentrera sur les méthodes de codage de Vue 3 qui sont incompatibles avec Vue 2. Nous explorerons les nouvelles fonctionnalités, les modifications de syntaxe et les optimisations introduites dans Vue 3. En comparant ces changements en détail, nous comprendrons comment mieux migrer et utiliser Vue 3.

1. Introduction

Dans Vue 3, l'API Composition a été introduite en tant que complément et extension de l'API Options. L'API de composition est conçue pour fournir une manière plus flexible et composable d'organiser le code. Les incohérences entre l'API Composition et l'API Options sont détaillées ci-dessous.

1. API de composition

L'API de composition est une nouvelle fonctionnalité de Vue 3. Elle fournit un ensemble d'API fonctionnelles pour organiser et réutiliser la logique du code. Par rapport à l'API Options, l'API Composition est plus flexible et plus maintenable, et est particulièrement adaptée au traitement d'une logique métier complexe et d'une logique partagée entre les composants.

Les principales fonctionnalités de l'API de composition incluent :

• Utiliser des fonctions pour organiser la logique : encapsulez la logique pertinente en fonction des fonctions et réutilisez-la via des fonctions.
• Combinaison précise de logique : la logique des différentes fonctions peut être combinée selon les besoins sans suivre un ordre fixe de déclaration.
• Meilleure réutilisabilité du code : la logique peut être extraite dans des fonctions personnalisées et référencée et appelée dans des composants.
• Meilleure inférence de type et prise en charge de l'éditeur : grâce à la programmation fonctionnelle, l'éditeur peut mieux déduire les types et fournir la complétion du code.

Voici un exemple utilisant l'API Composition :

import {
    
     reactive, computed } from 'vue';

export default {
    
    
  setup() {
    
    
    const state = reactive({
    
    
      count: 0,
    });

    const increment = () => {
    
    
      state.count++;
    };

    const doubledCount = computed(() => {
    
    
      return state.count * 2;
    });

    return {
    
    
      state,
      increment,
      doubledCount,
    };
  },
};

2. API d'options

L'API Options est un moyen couramment utilisé pour écrire des composants dans Vue 2. Elle définit diverses propriétés, méthodes et hooks de cycle de vie du composant en déclarant un objet d'options. Par rapport à l'API de composition, l'API Options est plus adaptée à l'écriture de composants simples ou aux débutants.

Les principales fonctionnalités de l'API Options incluent :

• Basé sur un objet d'options : utilisez un objet contenant diverses options pour définir différents aspects du composant.
• Hooks de cycle de vie déclaratifs : gérez les événements du cycle de vie des composants via des fonctions de hook de cycle de vie prédéfinies.
• Les données et méthodes sont définies dans le même objet : les données et méthodes du composant sont définies dans les propriétés de l'objet options.
• Accès au contexte à l'intérieur de l'objet : Le contexte du composant est accessible à l'intérieur du composant via le mot-clé this.

Voici un exemple utilisant l'API Options :

export default {
    
    
  data() {
    
    
    return {
    
    
      count: 0,
    };
  },
  methods: {
    
    
    increment() {
    
    
      this.count++;
    },
  },
  computed: {
    
    
    doubledCount() {
    
    
      return this.count * 2;
    },
  },
};

Résumé :
L'API de composition a été introduite dans Vue 3 en tant que complément à l'API d'options. L'API Composition offre une manière plus flexible et composable d'écrire du code, adaptée à la gestion d'une logique métier complexe et d'une logique partagée entre les composants. Et API d'options

Il est plus adapté à l’écriture de composants simples ou aux débutants. Dans les projets de migration ou les nouveaux projets, vous pouvez choisir l'API appropriée pour écrire des composants Vue en fonction de vos besoins.

2. Syntaxe du modèle

Dans Vue 3, il existe également quelques incohérences avec Vue 2 en termes de syntaxe de modèle. Ce qui suit présentera respectivement la directive v-model, la liaison d'attributs dans le modèle et les modifications apportées aux composants dynamiques.

1. directive du modèle v :

Dans Vue 2, la directive v-model est utilisée pour implémenter une liaison bidirectionnelle entre les éléments de formulaire et les composants. Dans Vue 3, le comportement de la directive v-model a changé. La directive v-model dans Vue 3 est principalement utilisée pour la liaison bidirectionnelle entre les accessoires et l'émission des composants.

Lorsque vous utilisez la directive v-model, vous devez définir un attribut modelValue dans les accessoires du composant et utiliser update:modelValue dans l'événement submit pour mettre à jour l'attribut. L'utilisation spécifique est la suivante :

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

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  data() {
    return {
      value: '',
    };
  },
};
</script>

Dans le composant CustomInput, vous devez recevoir le modelValue via les accessoires et utiliser $emit('update:modelValue', newValue) dans l'événement d'entrée de la zone de saisie pour mettre à jour la valeur dans le composant parent.

2. Liaison d'attribut dans le modèle :

Dans Vue 2, la liaison de propriété peut être réalisée à l'aide de la directive v-bind ou de la syntaxe abrégée deux-points. Dans Vue 3, la syntaxe du côlon est écrite légèrement différemment et vous devez utiliser la directive v-bind pour lier explicitement les propriétés.

Exemple de liaison de propriété pour Vue 2 :

<template>
  <div :class="{ active: isActive }"></div>
  <input :value="message">
</template>

Exemple de liaison de propriété pour Vue 3 :

<template>
  <div v-bind:class="{ active: isActive }"></div>
  <input v-bind:value="message">
</template>

Il convient de noter que dans Vue 3, vous pouvez également utiliser la forme abrégée de liaison d'attribut, en abrégeant v-bind comme symbole de préfixe (tel que : @, :, #, etc.), et choisir le symbole de préfixe approprié en fonction de le but précis. .

3. Composants dynamiques :

Dans Vue 2, vous pouvez utiliser des éléments et des attributs pour réaliser une commutation dynamique des composants. Dans Vue 3, la manière d'écrire les composants dynamiques a subi quelques changements.

Exemple de composant dynamique dans Vue 2 :

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

Exemple de composant dynamique dans Vue 3 :

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: ComponentA,
    };
  },
  components: {
    ComponentA

,
    ComponentB,
  },
};
</script>

Dans Vue 3, vous pouvez utiliser directement l'objet composant comme valeur de currentComponent sans utiliser la chaîne de nom du composant.

Résumé :
Dans Vue 3, l'utilisation de la directive v-model a changé et elle est principalement utilisée pour la liaison bidirectionnelle entre les accessoires et l'émission des composants. La liaison de propriété dans les modèles nécessite une liaison de propriété explicite à l'aide de la directive v-bind, et vous pouvez choisir d'utiliser différents symboles de préfixe pour simplifier la syntaxe. La méthode d'écriture des composants dynamiques reste cohérente dans Vue 3. Il vous suffit d'attribuer l'objet composant directement à l'attribut is. Ces modifications rendent la syntaxe du modèle plus flexible et plus facile à utiliser dans Vue 3.

3. Système réactif

Dans Vue 3, le système réactif présente également quelques incohérences avec Vue 2. Ce qui suit présentera respectivement Ref et Reactive, Computed et Watch, ainsi que les modifications des propriétés statiques.

1. Réf et réactif :

Dans Vue 2, utilisez la méthode Vue.observable() pour convertir un objet normal en objet réactif. Dans Vue 3, deux nouvelles API réactives, Ref et Reactive, ont été introduites.

• Ref : Ref est un nouveau type dans Vue 3 qui encapsule les données normales et les rend réactives. Les données ordinaires peuvent être encapsulées dans des objets Ref via la fonction ref(). Lorsque vous utilisez des objets Ref, vous devez accéder et modifier la valeur via la propriété .value.

import {
    
     ref } from 'vue';

const count = ref(0);

console.log(count.value); // 访问值

count.value = 1; // 修改值

• Réactif : Reactive est une nouvelle fonction de Vue 3 qui reçoit un objet normal et renvoie un objet proxy réactif. Lors de l'utilisation de fonctions réactives, il n'est pas nécessaire d'appeler manuellement Vue.observable() pour convertir des objets comme dans Vue 2.

import {
    
     reactive } from 'vue';

const state = reactive({
    
    
  count: 0,
});

console.log(state.count); // 访问值

state.count = 1; // 修改值

2. Calculé et regardé :

Dans Vue 3, l'utilisation de Computed et Watch est fondamentalement la même que dans Vue 2, mais il y a quelques changements subtils.

• Calculé : dans Vue 3, vous pouvez utiliser la fonction calculée() pour créer des propriétés calculées. La fonction Computed() reçoit une fonction en paramètre et renvoie un objet Ref. A noter que dans Vue 3, vous n'avez plus besoin d'utiliser get et set pour définir les propriétés calculées, mais renvoyer directement les résultats calculés.

import {
    
     computed, ref } from 'vue';

const count = ref(0);

const doubledCount = computed(() => count.value * 2);

console.log(doubledCount.value); // 访问计算属性的值

• Watch : Dans Vue 3, vous pouvez utiliser la fonction watch() pour créer un écouteur afin d'exécuter une fonction de rappel lorsque les données réactives changent. La fonction watch() reçoit deux paramètres : les données à surveiller et la fonction de rappel. Il convient de noter que dans Vue 3, la fonction watch() ne prend plus en charge les expressions de chaîne.

import {
    
     watch, ref } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
    
    
  console.log(`count changed from ${
      
      oldValue} to ${
      
      newValue}`);
});

3. Attributs statiques :

Dans Vue 2, les propriétés statiques d'un composant sont accessibles via la propriété $options de l'instance Vue. Dans Vue 3, les propriétés statiques ont été supprimées et ne sont pas accessibles directement via les instances de composants. En effet, Vue 3 utilise une nouvelle implémentation interne basée sur Proxy et les propriétés statiques ne font plus partie de l'instance.

Résumé :
Dans Vue 3, Ref et Reactive offrent un moyen plus flexible et intuitif de créer des données réactives. Computed et Watch sont fondamentalement utilisés de la même manière.

Mais il y a quelques changements dans les détails grammaticaux. Il est à noter que les propriétés statiques des composants ont été supprimées dans Vue 3 et ne sont pas accessibles directement via les instances. Ces changements rendent le système réactif plus intuitif et plus facile à utiliser.

4. DOM virtuel

Dans Vue 3, le DOM virtuel (Virtual DOM) présente également quelques incohérences avec Vue 2. Ce qui suit présentera trois changements liés au DOM virtuel : Fragment, Teleport et Suspense.

1. Fragment：

Dans Vue 2, il n'est pas valide d'utiliser plusieurs éléments racine dans un modèle, ils doivent être enveloppés dans un élément parent. Dans Vue 3, vous pouvez utiliser Fragment pour résoudre ce problème. Fragment est un espace réservé spécial utilisé pour envelopper plusieurs éléments dans un modèle, mais ne génère pas d'éléments DOM supplémentaires dans le résultat du rendu.

Exemple utilisant Fragment :

<template>
  <Fragment>
    <div>Element 1</div>
    <div>Element 2</div>
  </Fragment>
</template>

<></>Les fragments peuvent être représentés à l'aide d'une syntaxe abrégée :

<template>
  <>
    <div>Element 1</div>
    <div>Element 2</div>
  </>
</template>

2. Téléportation：

Teleport est une nouvelle fonctionnalité de Vue 3, utilisée pour restituer le contenu des composants n'importe où dans le DOM. Teleport fournit un moyen concis de gérer le besoin de restituer du contenu en dehors du composant, comme le rendu du composant dans un menu modal, une boîte de dialogue ou un menu contextuel.

Exemple utilisant Teleport :

<template>
  <Teleport to="body">
    <div class="modal">
      Modal Content
    </div>
  </Teleport>
</template>

Dans l'exemple ci-dessus, tol'attribut spécifie l'emplacement cible vers lequel effectuer le rendu de la téléportation, ici body, mais il peut s'agir de n'importe quel autre sélecteur DOM légal.

3. Suspense :

Suspense est une autre fonctionnalité introduite dans Vue 3 qui est utilisée pour afficher un espace réservé pendant le chargement d'un composant asynchrone jusqu'à ce que le composant asynchrone soit chargé et prêt à être rendu. Suspense offre une meilleure expérience utilisateur et un contrôle plus granulaire.

Exemple utilisant Suspense :

<template>
  <Suspense>
    <template #default>
      <div>Loading...</div>
    </template>
    <template #fallback>
      <div>Error! Failed to load component.</div>
    </template>
    <AsyncComponent />
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

export default {
  components: {
    AsyncComponent,
  },
};
</script>

Dans l'exemple ci-dessus, #defaultle contenu de l'emplacement sera affiché avant le chargement du composant asynchrone, et #fallbackle contenu de l'emplacement sera affiché lorsque le composant asynchrone ne parvient pas à se charger.

Résumé :
Dans Vue 3, Fragment fournit un moyen de résoudre le problème de plusieurs éléments racine, Teleport fournit un contrôle de position de rendu des composants plus flexible et Suspense offre une meilleure expérience de chargement de composants asynchrones. Ces

Les modifications enrichissent les fonctionnalités de Virtual DOM, offrant davantage d'options de développement et une meilleure expérience utilisateur.

5. Optimisation des performances

Dans Vue 3, il existe également de nouvelles fonctionnalités et améliorations en matière d'optimisation des performances. Ce qui suit présentera la promotion statique et l'optimisation de la compilation, deux aspects liés à l'optimisation des performances.

1. Levage statique :

Dans Vue 2, le contenu statique des modèles est recréé à chaque nouveau rendu, ce qui peut entraîner des pénalités de performances. Dans Vue 3, grâce à la technologie de promotion statique, le compilateur peut détecter et optimiser le contenu statique et le promouvoir en constantes statiques, réduisant ainsi le coût de recréation.

Le levage statique peut apporter les avantages suivants :

• Il réduit le nombre de créations et de comparaisons de DOM virtuels et améliore les performances de rendu.
• En réduisant les opérations DOM inutiles, le coût de redistribution et de redessinage des pages est réduit.

2. Optimisation de la compilation :

Vue 3 a amélioré le compilateur et introduit certaines mesures d'optimisation pour améliorer l'efficacité et les performances de la compilation.

• Indicateur de correctif : le compilateur ajoutera un indicateur de correctif à chaque nœud VNode en fonction de la différence entre le contenu statique et le contenu dynamique du modèle pour effectuer des opérations plus précises pendant le processus de mise à jour et réduire les opérations de comparaison et de rendu inutiles.

• Mise en cache des fonctions de gestion des événements : dans Vue 3, le compilateur met en cache les fonctions de gestion des événements pour éviter de créer de nouvelles instances de fonction à chaque fois qu'elles sont restituées, améliorant ainsi les performances du traitement des événements.

• Promotion des nœuds statiques : le compilateur détectera les nœuds statiques dans le modèle et les promouvra en constantes pour éviter de créer de nouveaux VNodes à chaque fois qu'ils sont restitués, réduisant ainsi la surcharge de rendu.

• Tremblement d'arbre : le compilateur de Vue 3 prend en charge la suppression des composants et des instructions inutilisés des modèles, réduisant ainsi le volume de packaging et améliorant les performances de chargement des applications.

Résumé :
Dans Vue 3, les performances des applications peuvent être améliorées grâce à des mesures telles que l'amélioration statique et l'optimisation de la compilation. L'amélioration statique réduit la surcharge liée à la recréation de contenu statique, tandis que l'optimisation de la compilation améliore les performances en améliorant le compilateur et en optimisant le processus de rendu. Ces mesures d'optimisation ont considérablement amélioré les performances de Vue 3, offrant une meilleure expérience utilisateur et une plus grande efficacité de développement.

6. Prise en charge de TypeScript

Dans Vue 3, la prise en charge de TypeScript a été considérablement améliorée. Ce qui suit présentera l'inférence de type et la déclaration de type, deux aspects liés à la prise en charge de TypeScript.

1. Inférence de type :

Vue 3 est capable de déduire automatiquement le type de variables dans de nombreux cas, offrant ainsi une meilleure sécurité de type et une meilleure expérience de développement. Voici quelques exemples:

• Inférence d'accessoires : dans un composant, vous pouvez definePropsdéfinir les accessoires du composant via la fonction et effectuer une inférence de type en fonction de la valeur par défaut des accessoires et de la valeur transmise.

import {
    
     defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
    
    
  props: {
    
    
    message: String,
    count: {
    
    
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    
    
    // 在使用 props 时，可以获得类型推断
    console.log(props.message.toUpperCase());
    console.log(props.count.toFixed(2));

    // ...
  },
});

• Inférence Ref : lors de l'utilisation refde la fonction pour créer un objet Ref, Vue 3 peut automatiquement déduire le type de la valeur enveloppée dans l'objet Ref.

import {
    
     ref } from 'vue';

const count = ref(0); // 推断为 Ref<number>

console.log(count.value.toFixed(2)); // value 推断为 number

• Inférence calculée : lors de l'utilisation computedde la fonction pour créer une propriété calculée, Vue 3 peut automatiquement déduire le type de la propriété calculée en fonction de la valeur de retour de la fonction calculée.

import {
    
     computed, ref } from 'vue';

const count = ref(0);

const doubledCount = computed(() => count.value * 2); // 推断为 ComputedRef<number>

console.log(doubledCount.value.toFixed(2)); // value 推断为 number

2. Déclaration de type :

Vue 3 offre une meilleure prise en charge d'une inférence de type et d'une vérification de type plus précises lors de l'utilisation de composants Vue dans TypeScript.

• Fonction définirComponent : defineComponentles composants peuvent être définis à l'aide de la fonction, qui accepte un objet de configuration de composant et renvoie un objet d'options de composant contenant la déclaration de type correcte.

import {
    
     defineComponent } from 'vue';

export default defineComponent({
    
    
  name: 'MyComponent',
  props: {
    
    
    message: String,
    count: {
    
    
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    
    
    console.log(props.message.toUpperCase());
    console.log(props.count.toFixed(2));

    // ...
  },
});

• Déclarations de type de l'API Options : pour les composants qui utilisent l'API Options, Vue 3 fournit des déclarations de type correctes pour garantir que vous obtenez des indications de type et une vérification de type correctes lors de l'écriture des options de composant.

import {
    
     Options, VueConstructor } from 'vue';

const MyComponent: Options = {
    
    
  name: 'MyComponent',
  props: {
    
    
    message: String,
    count: {
    
    
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    
    
    console.log(props.message.toUpperCase());
    console.log(props.count.toFixed(2));

    // ...
  },
};

export default MyComponent as VueConstructor;

Résumé :
prise en charge de TypeScript améliorée dans Vue 3

, y compris l'inférence de type et la déclaration de type. L'inférence de type permet aux développeurs d'obtenir une meilleure sécurité des types et une meilleure expérience de développement, tandis que les déclarations de type garantissent des indications de type précises et une vérification de type lors de l'utilisation des composants Vue. Ces améliorations rendent le développement d'applications Vue avec TypeScript plus confortable et efficace.

7. Emplacements et composants

Dans Vue 3, il y a également quelques changements dans les emplacements et les composants. La nouvelle syntaxe d'emplacement et l'accès aux instances de composants seront présentés ci-dessous.

1. Nouvelle syntaxe de slot :

Vue 3 introduit une nouvelle syntaxe de slot plus flexible et intuitive. La nouvelle syntaxe des slots utilise <slot>des éléments pour définir les slots et permet davantage de fonctionnalités via des slots nommés et des slots étendus.

Exemple d'emplacement nommé :

<template>
  <div>
    <slot name="header"></slot>
    <div>Content</div>
    <slot name="footer"></slot>
  </div>
</template>

Lorsque vous utilisez des composants, vous pouvez utiliser <template v-slot:slotName>une abréviation ou <template #slotName>pour définir spécifiquement le contenu de l'emplacement.

<template>
  <MyComponent>
    <template #header>
      <h1>Header Content</h1>
    </template>
    <p>Main Content</p>
    <template #footer>
      <footer>Footer Content</footer>
    </template>
  </MyComponent>
</template>

Exemple d'emplacement de portée :

<template>
  <div>
    <slot name="header" :title="title"></slot>
    <div>Content</div>
    <slot name="footer" :year="year"></slot>
  </div>
</template>

slotPropsLors de l'utilisation d'emplacements limités, les données transmises à l'emplacement sont accessibles via les propriétés du contenu de l'emplacement .

<template>
  <MyComponent>
    <template #header="slotProps">
      <h1>{
   
   { slotProps.title }}</h1>
    </template>
    <p>Main Content</p>
    <template #footer="slotProps">
      <footer>{
   
   { slotProps.year }}</footer>
    </template>
  </MyComponent>
</template>

2. Accès aux instances de composants :

Dans Vue 2, $refsles instances de composants sont accessibles via , mais dans Vue 3, l'accès aux instances de composants a changé. Vous pouvez utiliser refdes fonctions pour créer une référence réactive et la lier à un composant.

<template>
  <div>
    <MyComponent ref="myComponentRef"></MyComponent>
    <button @click="logComponentData">Log Component Data</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myComponentRef = ref(null);

    const logComponentData = () => {
      console.log(myComponentRef.value.data);
    };

    return {
      myComponentRef,
      logComponentData,
    };
  },
};
</script>

Dans l'exemple ci-dessus, refune référence est créée via une fonction myComponentRefet liée au MyComponentcomposant. Vous pouvez ensuite myComponentRef.valueaccéder à l'instance du composant via et obtenir ses données.

Résumé :
Dans Vue 3, la syntaxe des emplacements a changé

isation, introduisant une nouvelle syntaxe de slot, rendant l'utilisation des slots plus flexible et intuitive. Dans le même temps, l'accès aux instances de composants a également changé. refDes références réactives peuvent être créées via des fonctions et liées aux composants pour accéder aux instances de composants. Ces changements rendent l'utilisation des emplacements et des composants plus pratique et plus puissante.

8. Transitions et animations

Dans Vue 3, il y a également quelques améliorations au niveau des transitions et des animations. Les deux aspects du composant de transition et du nom de la classe d'animation seront présentés ci-dessous.

1. Volet de transition :

Dans Vue 3, les effets de transition peuvent être obtenus via le composant Transition. Le composant Transition offre la possibilité d'appliquer des effets de transition lorsque des éléments sont insérés ou supprimés.

Lorsque vous utilisez le composant Transition, vous pouvez contrôler l'effet de transition via les propriétés suivantes :

• name: Spécifiez le nom de l'effet de transition. Vous pouvez définir des effets de transition spécifiques en définissant le nom de la classe CSS.

• appear: Spécifie s'il faut appliquer des effets de transition sur le rendu initial.

• enter-class// enter-active-class: enter-to-classSpécifiez le nom de la classe de transition lors de l'insertion d'éléments.

• leave-class// leave-active-class: leave-to-classSpécifiez le nom de la classe de transition lors de la suppression d'éléments.

Voici un exemple d'utilisation du composant Transition pour implémenter une transition dégradée :

<template>
  <Transition name="fade">
    <div v-if="show" class="box"></div>
  </Transition>
  <button @click="toggle">Toggle</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);

    const toggle = () => {
      show.value = !show.value;
    };

    return {
      show,
      toggle,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Dans l'exemple ci-dessus, name="fade"le composant Transition est appliqué à l'élément encapsulé via les paramètres et le nom de classe CSS de l'effet de transition est défini. Lors du rendu initial, les noms de classe fade-enteret fade-enter-activeseront appliqués pour obtenir l'effet d'apparence dégradée. Lorsque l'élément est supprimé, le nom de la classe sera appliqué pour obtenir l'effet de disparition du dégradé fade-leave.fade-leave-active

2. Nom de la classe d'animation :

Dans Vue 3, vous pouvez utiliser des noms de classes d'animation pour animer des éléments. Semblable à Vue 2, les effets d'animation peuvent être déclenchés en ajoutant un nom de classe à un élément.

Les noms de classes d'animation couramment utilisés dans Vue 3 incluent :

• enter: L'état de départ de l'élément inséré.

• enter-active: L'état de transition de l'élément inséré.

• enter-to: L'état final de l'élément inséré.

• leave: Supprime l'état de départ de l'élément.

• leave-active: Supprime l'état de transition d'un élément.

• leave-to: Supprime l'état final de l'élément.

Des effets d'animation spécifiques peuvent être obtenus en définissant les styles CSS de ces noms de classe.

Par exemple, implémentez une simple animation de fondu :

<template>
  <div :class="animationClass" class="box"></div>
  <button @click="toggle">Toggle</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {


    const show = ref(true);

    const toggle = () => {
      show.value = !show.value;
    };

    const animationClass = ref('');

    watch(show, () => {
      animationClass.value = show.value ? 'fade-enter-active' : 'fade-leave-active';
    });

    return {
      show,
      toggle,
      animationClass,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Dans l'exemple ci-dessus, animationClassl'effet d'animation est obtenu grâce à une liaison dynamique. Lorsque showla valeur de change, la valeur de sera showdéfinie en fonction de la valeur de animationClass, déclenchant ainsi l'effet d'animation correspondant.

Résumé :
Dans Vue 3, les aspects de transition et d'animation peuvent être réalisés via le composant Transition et le nom de la classe d'animation. Le composant Transition offre la possibilité de contrôler l'insertion et la suppression d'effets de transition sur les éléments, et le nom de la classe d'animation peut déclencher des effets d'animation en ajoutant le nom de la classe. Ces améliorations rendent les transitions et les animations plus flexibles et plus faciles à utiliser.

9. Modifications globales de l'API

Dans Vue 3, l'API globale a subi quelques modifications, notamment des changements de nom et la suppression de l'API globale. Les changements dans ces deux aspects seront présentés ci-dessous.

1. Changement de nom global de l'API :

Dans Vue 3, les noms de certaines API globales ont changé pour mieux refléter leurs fonctionnalités et leur objectif.

• Vue: Dans Vue 3, Vueles constructeurs ne sont plus exportés comme point d'entrée par défaut. Vous pouvez utiliser createAppdes fonctions pour créer des instances d'application.

// Vue 2
new Vue({
    
    
  // ...
});

// Vue 3
import {
    
     createApp } from 'vue';

createApp({
    
    
  // ...
}).mount('#app');

• filter: Dans Vue 2, Vue.filterles filtres pouvaient être enregistrés via des méthodes globales, mais dans Vue 3, les filtres ont été supprimés. Vous pouvez utiliser des filtres locaux ou des fonctions personnalisées pour obtenir la même fonctionnalité.

• directive: Dans Vue 2, Vue.directiveles directives pouvaient être enregistrées via des méthodes globales, mais dans Vue 3, les directives ont été supprimées. Vous pouvez utiliser des directives personnalisées ou utiliser des directives directement dans les composants pour remplacer les directives globales.

• mixin: Dans Vue 2, Vue.mixinles options de mixage pouvaient être transmises via des méthodes globales, mais dans Vue 3, les options de mixage ont été supprimées. La même fonctionnalité peut être obtenue à l’aide de l’API Composition.

• component: Dans Vue 2, Vue.componentles composants globaux peuvent être enregistrés via des méthodes globales, mais dans Vue 3, la façon dont les composants sont enregistrés a changé. Les composants peuvent être enregistrés à l'aide de l'enregistrement local ou via componentdes méthodes d'instance d'application.

2. API globale supprimée :

En plus des changements de nom, Vue 3 supprime également certaines API globales car leurs fonctionnalités peuvent être implémentées par d'autres moyens ou leur utilisation n'est plus recommandée.

• v-once: Dans Vue 2, vous pouvez utiliser v-oncedes directives pour marquer les éléments et composants à restituer une seule fois. Dans Vue 3, v-onceles directives ont été supprimées et le même effet peut être obtenu avec des données réactives et un rendu conditionnel.

• inline-template: Dans Vue 2, vous pouvez utiliser inline-templatedes attributs pour écrire le modèle d'un composant dans la balise du composant. Dans Vue 3, inline-templatela fonctionnalité a été supprimée et la même fonctionnalité peut être obtenue via des composants à fichier unique ou des modèles de chaînes.

• syncModificateurs : dans Vue 2, vous pouvez utiliser syncdes modificateurs pour réaliser une liaison bidirectionnelle entre les composants parents et enfants. Dans Vue 3, syncle modificateur a été supprimé et v-modelune liaison bidirectionnelle peut être réalisée en utilisant une liaison explicite à l'événement.

Résumé :
Dans Vue 3, l'API globale a subi quelques modifications, notamment des changements de nom et des déplacements.

Sauf pour l'API globale. Ces changements visent à améliorer la cohérence et la facilité d'utilisation de l'API et à pousser les développeurs à utiliser de meilleures alternatives pour obtenir les mêmes fonctionnalités. Les développeurs doivent être conscients de ces changements et mettre à jour leur code en conséquence.

10. Créer des outils et des écosystèmes

En termes d'outils de construction et d'écosystème, Vue 3 introduit quelques améliorations, notamment l'adaptation de Vue CLI et de bibliothèques tierces. Les changements dans ces deux aspects seront présentés ci-dessous.

1. Vue CLI étant donné Vue CLI 2 :

Vue CLI est l'outil d'échafaudage officiel de Vue.js, utilisé pour créer et gérer rapidement des projets Vue. Vue CLI 2 est la version de l'ère Vue 2, tandis que Vue CLI est une nouvelle version pour Vue 3.

Vue CLI 3 présente les améliorations suivantes par rapport à Vue CLI 2 :

• Il utilise un mécanisme de plug-in moderne pour rendre l'extension et la personnalisation plus flexibles et plus faciles.

• Une interface graphique est fournie via l'interface utilisateur Vue CLI pour faciliter la configuration et la gestion du projet.

• Introduction du service Vue CLI, qui est un outil de construction sous-jacent extensible qui intègre des outils de construction et de développement couramment utilisés.

• Prend en charge les nouvelles fonctionnalités de Vue 3, telles que l'API de composition et le nouveau cycle de vie.

Par conséquent, pour les projets Vue 3, il est recommandé d'utiliser Vue CLI pour l'initialisation et la gestion du projet.

2. Adaptation de bibliothèques tierces :

Avec la sortie de Vue 3, de nombreuses bibliothèques tierces s'adaptent et se mettent également à niveau pour prendre en charge les nouvelles fonctionnalités et la syntaxe de Vue 3. Certaines bibliothèques de l'écosystème Vue couramment utilisées ont publié des versions compatibles de Vue 3 ou ont fourni des guides d'adaptation de Vue 3 dans leur documentation officielle.

Lors de l'utilisation d'une bibliothèque tierce, il est recommandé de consulter sa documentation officielle pour savoir si elle prend en charge Vue 3 et comment s'adapter. Habituellement, les bibliothèques tierces adaptées à Vue 3 fournissent des directives d'installation et d'utilisation spécifiques, et certaines modifications de syntaxe et d'API doivent être notées.

De plus, Vue 3 introduit également un @vue/composition-apiplug-in officiel appelé, qui peut être utilisé pour utiliser l'API Composition dans les projets Vue 2. Ce plugin facilite la migration progressive vers l'API Composition de Vue 3 dans les projets Vue 2.

Résumé :
En termes d'outils de création et d'écosystème, Vue 3 apporte des mises à jour de Vue CLI et l'adaptation de bibliothèques tierces. Il est recommandé d'utiliser Vue CLI 3 pour créer et gérer des projets Vue 3, et de consulter la documentation officielle des bibliothèques tierces pour en savoir plus sur leur prise en charge et leur adaptation à Vue 3. Ces améliorations permettent aux développeurs de mieux tirer parti des nouvelles fonctionnalités et de l'écosystème de Vue 3, améliorant ainsi l'efficacité du développement et la qualité du code.