[Questions d'entretien frontal] Questions d'entretien frontal 2023 - Chapitre Vue

Il y a toujours des hauts et des bas dans la vie d'une personne. Il ne se lèvera pas toujours comme le soleil levant, et il ne sera pas toujours misérable. Des hauts et des bas répétés constituent un entraînement pour une personne. Par conséquent, ceux qui flottent au-dessus n’ont pas besoin d’être fiers ; ceux qui coulent en bas n’ont pas besoin d’être pessimistes. Nous devons être francs et humbles, optimistes et entreprenants, et aller de l’avant. ——Konosuke Matsushita

Bonjour à tous, je m'appelle Jiang Chen. Dans l'environnement Internet d'aujourd'hui, tout le monde a dû le ressentir dans une certaine mesure. Dans cette société impétueuse, ce n'est qu'en maintenant constamment son caractère que l'on peut percevoir des gains différents et s'encourager mutuellement.

Une collection des dernières questions d'entretien en 2023, alors soyez prêt à tout moment.

Cet article a été publié pour la première fois sur le compte public WeChat : Wild Programmer Jiang Chen

Tout le monde est invité à aimer, collectionner et suivre

Liste des articles

• Questions d'entretien préliminaire 2023 - JS
• Questions d'entretien frontal 2023 - CSS
• Questions d'entretien d'embauche 2023 - HTML
• Questions d'entretien préliminaire 2023 - React
• Questions d'entrevue frontale 2023 - chapitre sur le codage

Quels sont les avantages et les différences de Vue.js par rapport à d'autres frameworks front-end tels que React et Angular ?

1. Simplicité et facilité d'utilisation :

Vue.js est un framework léger, facile à apprendre et à utiliser. Il fournit une API intuitive et une documentation claire, permettant aux développeurs de créer rapidement des applications.
React et Angular sont à certains égards plus complexes et nécessitent des coûts d'apprentissage plus élevés.

2. Cadre progressif :

Vue.js est connu comme un framework progressif, vous permettant d'adopter progressivement ses fonctionnalités. Cela signifie que vous pouvez intégrer Vue.js dans votre projet existant sans avoir à réécrire l'intégralité de l'application en même temps.
React et Angular peuvent nécessiter plus de travail lorsqu'ils sont intégrés à des projets existants.

3. Liaison de données bidirectionnelle :

Vue.js fournit une liaison de données bidirectionnelle directe pour maintenir les données synchronisées entre les vues et les modèles. Cela permet aux développeurs de gérer plus facilement l'état de leurs applications.
React et Angular prennent également en charge la liaison de données, mais ils l'implémentent légèrement différemment.

4. Développement de composants :

Vue.js, React et Angular encouragent tous le développement basé sur des composants, mais Vue.js excelle à cet égard. La définition des composants Vue est très simple et facile à réutiliser et à maintenir.
React utilise JSX pour créer des composants, Angular utilise des modèles. Les systèmes de composants de ces frameworks sont également puissants, mais peuvent nécessiter plus de configuration.

5. Écosystème et communauté :

React et Angular disposent d'énormes écosystèmes et d'un soutien communautaire actif, avec de riches bibliothèques et plug-ins tiers.
L'écosystème Vue.js se développe également et, bien qu'il soit relativement petit, la communauté est également très active.

6. performance:

Vue.js fonctionne bien en termes de performances et dispose d'un mécanisme DOM virtuel qui peut mettre à jour les vues efficacement.
React utilise également le DOM virtuel et ses performances sont également très bonnes. Angular peut nécessiter davantage de travaux d'optimisation des performances dans certains cas.

7. Outils et écosystème :

Vue.js fournit des outils puissants, tels que Vue CLI, pour créer rapidement des projets et les intégrer aux bibliothèques officielles telles que Vue Router et Vuex.
React et Angular ont des outils et des bibliothèques similaires, mais l'écosystème d'outils de Vue est à certains égards plus intuitif et plus facile à utiliser.

8. Cas d'utilisation :

Vue.js convient aux applications de petite et moyenne taille et aux applications monopage (SPA), ainsi qu'aux projets nécessitant un prototypage rapide.
React et Angular conviennent aux applications de toutes tailles, y compris les applications de grande entreprise. En résumé, le choix du framework front-end à utiliser dépend des besoins du projet et des préférences de l'équipe. Vue.js présente des avantages en termes de simplicité, de facilité d'utilisation et de développement progressif, ce qui le rend adapté à de nombreux projets, mais React et Angular ont également leurs avantages dans les applications à grande échelle et les projets au niveau de l'entreprise.

Quelle est la différence entre une instance Vue et un composant ? Comment communiquent-ils ?

L'instance Vue et les composants dans Vue.js sont deux concepts différents. Il existe des différences importantes entre eux, et il existe également différentes manières de communiquer.

1. Instance Vue :

• Les instances Vue sont l'un des concepts fondamentaux de Vue.js. Il s'agit d'un objet Vue indépendant utilisé pour gérer l'état, le comportement et le cycle de vie de l'application.
• En règle générale, une instance racine d'une application Vue est créée, qui gère les données et les méthodes de l'ensemble de l'application. Vous pouvez utiliser new Vue()pour créer une instance Vue.

2. Composants :

• Les composants sont des blocs de code réutilisables dans Vue.js qui sont utilisés pour créer des interfaces utilisateur. Chaque composant a son propre état, comportement et modèles.
• Les composants peuvent être utilisés dans des modèles tels que des balises, vous permettant de créer des interfaces utilisateur complexes en les décomposant en parties maintenables.
• Les composants sont définis via Vue.componentou à l'aide de composants à fichier unique ( fichiers)..vue

moyen de communication :

Dans Vue.js, les instances et composants Vue peuvent communiquer des manières suivantes :

1. Accessoires :

• Les composants parents peuvent transmettre des données aux composants enfants via des accessoires. Les composants enfants reçoivent des données via des accessoires et les utilisent dans leurs propres modèles.
• Il s'agit d'une méthode de flux de données unidirectionnelle, dans laquelle les composants parents transmettent des données aux composants enfants.

2. Événements personnalisés :

• Les composants enfants peuvent notifier les composants parents des occurrences d'événements en déclenchant des événements personnalisés. Les composants parents peuvent écouter ces événements et effectuer les actions appropriées.
• Il s'agit d'un moyen de communication entre les composants enfants et les composants parents.

3. Gestion d'état (comme Vuex) :

• Pour les applications volumineuses, vous pouvez utiliser une bibliothèque de gestion d'état telle que Vuex pour gérer l'état de l'application. Il fournit un magasin d'état centralisé où tous les composants peuvent accéder et modifier les données.
• Il s'agit d'un moyen de communication de haut niveau entre les composants.

4. Injection de dépendances :

• Vue.js fournit un mécanisme d'injection de dépendances qui vous permet d'enregistrer certaines données dans les composants ancêtres, puis d'accéder à ces données dans les composants descendants sans passer d'accessoires couche par couche.
• L'injection de dépendances est généralement utilisée pour transmettre certaines configurations globales ou styles de thème.

Résumé :
les instances Vue sont les objets racine de l'ensemble de l'application et les composants sont des modules réutilisables dans l'application. La communication entre eux se fait principalement via des accessoires et des événements personnalisés, mais pour une gestion d'état plus complexe, vous pouvez utiliser Vuex ou d'autres bibliothèques de gestion d'état.

Qu'est-ce que la fonction hook de cycle de vie dans Vue ? Quel est l’ordre dans lequel ils sont exécutés ?

Les hooks de cycle de vie dans Vue.js sont un ensemble spécifique de fonctions qui vous permettent d'exécuter du code au cours des différentes étapes du cycle de vie de votre composant. Ces fonctions de hook peuvent être utilisées pour effectuer des tâches telles que l'initialisation, le chargement de données, les opérations DOM, etc. Les fonctions hook de cycle de vie des composants Vue sont exécutées dans l'ordre suivant :

1. beforeCreate (avant la création) :

   • Appelé immédiatement avant la création de l'instance du composant.
   • À l’heure actuelle, les données et événements du composant n’ont pas encore été initialisés.

2. créé (après création):

   • Appelé immédiatement après la création de l'instance du composant.
   • Les données du composant ont été initialisées, mais elles n'ont pas encore été montées sur le DOM.

3. beforeMount (avant le montage):

   • Appelé immédiatement avant que le composant ne soit monté sur le DOM.
   • À ce stade, la compilation du modèle est terminée, mais le composant n'a pas encore été rendu sur la page.

4. monté (après montage):

   • Appelé immédiatement après le montage du composant sur le DOM.
   • À ce stade, le composant a été rendu sur la page et les opérations DOM peuvent être effectuées.

5. beforeUpdate (avant la mise à jour) :

   • Appelé immédiatement avant la mise à jour des données du composant.
   • Dans cette fonction hook, vous pouvez accéder à l'état précédent, mais les dernières données n'ont pas encore été appliquées.

6. mis à jour:

   • Appelé immédiatement après la mise à jour des données du composant.
   • À ce stade, le composant a été restitué et les opérations DOM peuvent être effectuées.

7. beforeDestroy (avant destruction):

   • Appelé immédiatement avant la destruction du composant.
   • À ce stade, le composant est toujours disponible et vous pouvez effectuer un travail de nettoyage.

8. détruit (après destruction):

   • Appelé immédiatement après la destruction du composant.
   • À ce stade, le composant a été complètement détruit et n'est plus disponible.

Ces fonctions de hook de cycle de vie vous permettent d'exécuter du code à différentes étapes pour répondre aux besoins de votre application. Par exemple, createdl'initialisation des données peut être effectuée dans des hooks et mountedles opérations DOM peuvent être effectuées dans des hooks. Veuillez noter que différents hooks de cycle de vie conviennent à différents objectifs et que vous devez choisir la fonction de hook appropriée pour effectuer les tâches correspondantes en fonction de vos besoins.

Comment la liaison de données bidirectionnelle de Vue est-elle implémentée ? Veuillez donner un exemple.

La liaison de données bidirectionnelle de Vue.js est implémentée via son système réactif unique. Ce système utilise l'objet ES6 Proxy ou la méthode Object.defineProperty() pour avertir la vue de la mettre à jour lorsque les données changent. Cela signifie que lorsque vous modifiez le modèle de données, les vues qui lui sont associées sont automatiquement mises à jour, et vice versa.

Voici un exemple simple qui montre comment implémenter la liaison de données bidirectionnelle dans Vue.js :

Modèle HTML :

<div id="app">
  <input v-model="message" type="text">
  <p>{
   
   { message }}</p>
</div>

Code JavaScript pour l'instance Vue :

new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'Hello, Vue!'
  }
})

Dans cet exemple, nous utilisons v-modeldes directives pour lier de manière bidirectionnelle <input>des éléments aux propriétés de l'instance Vue message. Cela signifie que lorsque vous saisissez du texte dans la zone de saisie, messagela valeur de sera automatiquement mise à jour, et messagelorsque la valeur de change, le texte sera également mis à jour automatiquement.

Lorsque vous saisissez du texte dans la zone de saisie, Vue mettra automatiquement à jour la valeur saisie dans messagel'attribut, réalisant ainsi une mise à jour de la vue vers les données. À son tour, si vous modifiez messagela valeur de l'attribut dans le code JavaScript, le texte de la vue sera automatiquement mis à jour, réalisant une mise à jour des données vers la vue.

Cette liaison de données bidirectionnelle maintient les données synchronisées avec la vue, simplifiant considérablement la tâche de gestion des entrées utilisateur et de présentation des données dans le développement front-end.

Quel est le rôle des propriétés calculées et des observateurs dans Vue ? Quelle est la différence entre eux ?

Dans Vue.js, les propriétés calculées et les observateurs sont tous deux utilisés pour gérer les modifications des données, mais ils ont des rôles et des utilisations différents.

Propriétés calculées :

Une propriété calculée est un type de propriété dans Vue.js dont la valeur est calculée en fonction d'autres propriétés de données, similaire à une fonction. La fonction principale des propriétés calculées est d'encapsuler la logique de calcul afin qu'elle puisse être référencée directement dans le modèle, et elles disposent d'un mécanisme de mise en cache qui ne sera recalculé que lorsque les données dépendantes changent.

Principales caractéristiques et fonctions :

• Utilisé pour dériver ou calculer une valeur basée sur un attribut de données existant.
• Avec un mécanisme de mise en cache, il ne sera recalculé que lorsque les données pertinentes changeront, améliorant ainsi les performances.
• Il peut être référencé directement dans le modèle comme un attribut normal.
• Les propriétés calculées sont généralement utilisées pour de simples opérations de conversion, de filtrage, de formatage et d'autres opérations de données.

Exemple:

<template>
  <div>
    <p>{
   
   { fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

Observateurs :

Les observateurs sont un moyen dans Vue.js d'effectuer des opérations personnalisées asynchrones ou coûteuses lorsque les données changent. Vous pouvez écouter les modifications dans une ou plusieurs propriétés de données et exécuter des fonctions spécifiques lorsque les données changent.

Principales caractéristiques et fonctions :

• Utilisé pour effectuer des opérations personnalisées lorsque les données changent, telles que des requêtes asynchrones ou un traitement de données complexe.
• Il n'y a pas de mécanisme de mise en cache et l'exécution sera déclenchée à chaque fois que les données changeront.
• Les fonctions d'observateur doivent être écrites manuellement pour gérer les modifications de données.
• Peut surveiller les changements dans plusieurs attributs de données.

Exemple:

<template>
  <div>
    <p>{
   
   { message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'Initial Value',
      message: ''
    }
  },
  watch: {
    value(newValue, oldValue) {
      // 在value属性变化时执行的操作
      this.message = 'Value changed: ' + newValue;
    }
  }
}
</script>

la différence:

1. Les attributs calculés sont principalement utilisés pour la conversion et la dérivation de données. Ils disposent d'un mécanisme de mise en cache et ne seront recalculés que lorsque les données pertinentes changent. Ils conviennent à un traitement simple des données. Ils peuvent être référencés directement dans le modèle comme les propriétés normales.

2. Les observateurs sont utilisés pour effectuer des opérations personnalisées lorsque les données changent. Il n'y a pas de mécanisme de mise en cache et l'exécution sera déclenchée à chaque fois que les données changent. Convient à la gestion d'opérations asynchrones complexes ou de situations dans lesquelles plusieurs modifications de données doivent être surveillées.

En fonction de vos besoins spécifiques, vous pouvez choisir d'utiliser des propriétés calculées ou des observateurs pour gérer les modifications de données. Généralement, les propriétés calculées sont préférées car elles sont plus simples et plus performantes, tandis que les observateurs ne sont utilisés que lorsqu'un traitement spécial des modifications de données est requis.

Parlez de votre compréhension des composants Vue. Comment créer un composant Vue ?

Les composants Vue sont des modules réutilisables dans les applications Vue.js. Ils divisent une page en plusieurs parties indépendantes, chaque partie a son propre état, modèle et comportement. La composantisation est l'un des concepts fondamentaux de Vue.js, qui rend le développement front-end plus modulaire, maintenable et réutilisable.

Les étapes de base pour créer un composant Vue sont les suivantes :

1. Définir le composant : Tout d'abord, vous devez définir un composant Vue. Les composants peuvent être définis à l'aide Vue.componentde la méthode ou à l'aide de composants à fichier unique (fichiers .vue). Voici Vue.componentun exemple de définition d'un composant en utilisant :

Vue.component('my-component', {
  // 组件的选项
  template: '<div>This is a custom component</div>'
})

2. Utilisation de composants dans des modèles : une fois qu'un composant est défini, vous pouvez l'utiliser dans le modèle du composant parent. Par exemple:

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

3. Transmettre des données au composant : vous pouvez transmettre des données au composant via les accessoires du composant, afin que le composant puisse recevoir des données externes et les utiliser dans le modèle. Par exemple:

<template>
  <div>
    <my-component :message="message"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent component'
    }
  }
}
</script>

À l'intérieur du composant, vous pouvez utiliser propspour recevoir ces données et les utiliser dans le modèle :

<template>
  <div>
    <p>{
   
   { message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

4. Cycle de vie des composants : les composants disposent également de fonctions de hook de cycle de vie qui vous permettent d'exécuter du code à différentes étapes du cycle de vie. Ces fonctions de hook incluent beforeCreate, created, beforeMount, mountedetc., qui sont utilisées pour effectuer des tâches telles que l'initialisation, le chargement de données et les opérations DOM.

5. Événements personnalisés : les composants peuvent communiquer entre eux via des événements personnalisés. Les composants enfants peuvent déclencher des événements personnalisés et les composants parents peuvent écouter ces événements et effectuer les actions correspondantes.

6. Communication entre les composants : en plus des accessoires et des événements personnalisés, vous pouvez également utiliser des outils de gestion d'état comme Vuex pour réaliser la communication et le partage de données entre les composants.

En bref, les composants Vue sont l'un des concepts fondamentaux des applications Vue.js. Ils rendent le développement front-end plus modulaire et maintenable, vous permettant de diviser l'interface en plusieurs parties réutilisables, chaque partie ayant son propre état et son propre comportement. La création et l'utilisation de composants constituent une partie importante du développement de Vue.js, vous aidant à créer des applications frontales plus efficaces et plus maintenables.

Que sont les directives dans Vue ? Énumérez quelques instructions couramment utilisées et présentez brièvement leurs fonctions.

Dans Vue.js, les directives sont des jetons spéciaux qui peuvent être utilisés dans des modèles pour représenter des actions sur les éléments DOM. Une directive v-commence par , suivi du nom de la directive, par exemple v-bind, v-ifetc. Les instructions sont utilisées pour lier les données du modèle aux éléments DOM et contrôler l'affichage, le masquage, le rendu et le comportement des éléments.

Voici quelques directives Vue couramment utilisées et ce qu'elles font :

1. v-bind：

   • Fonction : utilisé pour lier les attributs des éléments et lier les valeurs d'attribut des éléments aux données des instances Vue.
   • Exemple:<img v-bind:src="imageUrl">

2. v-model：

   • Fonction : utilisé pour implémenter une liaison bidirectionnelle entre les éléments du formulaire et les données de l'instance Vue, afin que les entrées de l'utilisateur puissent automatiquement mettre à jour les données, et vice versa.
   • Exemple:<input v-model="message">

3. v-for：

   • Fonction : utilisé pour parcourir les données d'un tableau ou d'un objet et générer plusieurs éléments.
   • Exemple:<li v-for="item in items">{ { item }}</li>

4. v-if/ v-else-if/ v-else：

   • Fonction : utilisé pour contrôler l'affichage et le masquage d'éléments en fonction de conditions, similaires aux instructions conditionnelles en JavaScript.
   • Exemple:<div v-if="show">This is shown</div>

5. v-show：

   • Fonction : Utilisé pour contrôler l'affichage et le masquage des éléments en fonction de conditions. Différent de cela v-if, il est contrôlé via les propriétés CSS displayet ne détruit ni ne recrée les éléments.
   • Exemple:<div v-show="isVisible">This is shown</div>

6. v-on：

   • Fonction : utilisé pour écouter les événements DOM et exécuter la méthode spécifiée lorsque l'événement est déclenché.
   • Exemple:<button v-on:click="handleClick">Click me</button>

7. v-pre：

   • Fonction : ignorez le processus de compilation de cet élément et de ses sous-éléments et affichez-les directement au format HTML brut.
   • Exemple:<div v-pre>{ { message }}</div>

8. v-cloak：

   • Fonction : Restez caché entre l'élément et l'instance Vue jusqu'à ce que la compilation de Vue soit terminée.
   • Exemple:<div v-cloak>{ { message }}</div>

9. v-once：

   • Fonction : ne restituez les éléments et les composants qu'une seule fois, aucune mise à jour réactive ne sera effectuée.
   • Exemple:<span v-once>{ { message }}</span>

Ces instructions vous permettent de manipuler facilement les éléments DOM dans le modèle et de mettre à jour dynamiquement la vue en fonction des modifications des données. Chaque directive a son rôle spécifique, vous permettant de définir l'interaction et la logique de votre page de manière déclarative. Vous pouvez utiliser ces directives dans des modèles selon vos besoins pour créer de puissantes applications Vue.js.

Qu'est-ce que Vuex ? Qu'est ce que ça fait? Veuillez décrire la structure de base d'une application Vuex.

Vuex est une bibliothèque de gestion d'état développée spécifiquement pour les applications Vue.js. Il est principalement utilisé pour gérer l'état partagé (tel que les données, l'état, les informations de configuration, etc.) dans les applications Vue.js afin de mieux organiser, maintenir et suivre le flux de données dans l'application. L'idée principale de Vuex est de stocker de manière centralisée l'état de l'application dans un magasin global, rendant les changements d'état prévisibles et maintenables.

Les principales fonctions de Vuex incluent :

1. Gestion centralisée de l'état : Vuex permet de stocker l'état d'une application dans un seul endroit, appelé magasin. Ce magasin est un arbre d'état réactif. Plusieurs composants peuvent partager et accéder à cet état sans transmettre de données via des accessoires.

2. Les changements d'état peuvent être suivis : Vuex utilise un mécanisme strict de suivi des changements d'état. Chaque fois que l'état change, il y aura des enregistrements et des journaux clairs pour permettre aux développeurs de suivre et de déboguer les applications.

3. Communication des composants : Vuex fournit un moyen unifié de gérer la communication entre les composants. Les composants peuvent modifier leur état en soumettant des mutations et peuvent également déclencher des opérations asynchrones en répartissant des actions, et ces opérations sont prévisibles et contrôlables.

4. Middleware : Vuex prend en charge le middleware, qui peut exécuter une logique supplémentaire lorsque l'état change, comme la journalisation, la persistance des données, etc.

Une application Vuex de base comprend généralement les composants suivants :

• État : stocke les données d'état de l'application, généralement un objet JavaScript.

• Mutations : méthodes utilisées pour modifier l'état. Chaque mutation a un type et une fonction de gestionnaire qui effectue l'opération de modification d'état réelle.

• Actions : similaires aux mutations, mais elles peuvent contenir des opérations asynchrones, généralement utilisées pour gérer l'interaction avec le serveur, l'acquisition de données, etc. Les actions sont chargées de soumettre des mutations pour modifier l'état.

• Getters (propriétés calculées) : utilisés pour dériver de nouvelles données de l'état, similaires aux propriétés calculées, et peuvent être utilisés directement par les composants.

• Store : un objet qui gère de manière centralisée les états, les mutations, les actions et les getters. C'est le cœur de Vuex.

Voici un exemple de la structure de base d'une application Vuex simple :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    increment(state) {
    
    
      state.count++
    },
    decrement(state) {
    
    
      state.count--
    }
  },
  actions: {
    
    
    incrementAsync(context) {
    
    
      setTimeout(() => {
    
    
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    
    
    doubleCount(state) {
    
    
      return state.count * 2
    }
  }
})

export default store

Dans l'exemple ci-dessus, nous avons défini un magasin Vuex contenant des états, des mutations, des actions et des propriétés calculées. Ce magasin peut être référencé dans les composants Vue et est utilisé pour gérer et manipuler l'état de l'application. L'utilisation de Vuex peut grandement simplifier la gestion des états et la communication des composants, en particulier dans les grandes applications.

Qu’est-ce que Vue Router ? Qu'est ce que ça fait? Veuillez décrire l'utilisation de base de Vue Router.

Vue Router est la bibliothèque officielle de gestion de routage de Vue.js, utilisée pour créer des applications monopage (SPA). Il permet d'implémenter la navigation entre les pages, les sauts de routage et la gestion des URL dans les applications Vue. La fonction principale de Vue Router est d'associer différents composants de vue à différents itinéraires (adresses URL) de l'application pour réaliser la commutation et la navigation entre les pages.

L'utilisation de base de Vue Router comprend les étapes suivantes :

1. Installez Vue Router : Tout d'abord, installez Vue Router dans votre projet Vue.js. Vous pouvez l'installer en utilisant npm ou Yarn :

   npm install vue-router
   # 或者
   yarn add vue-router
   

2. Créez une configuration de routage : créez un fichier de configuration de routage dans votre projet, généralement nommé router.js, et importez Vue et Vue Router :

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   
   const routes = [
     {
         
         
       path: '/',         // 路由路径
       component: Home    // 对应的视图组件
     },
     {
         
         
       path: '/about',
       component: About
     }
     // 其他路由配置
   ]
   
   const router = new VueRouter({
         
         
     routes // 使用配置文件中的路由规则
   })
   
   export default router
   

3. Créer des composants de vue : créez des composants de vue correspondants pour chaque chemin de routage. Ces composants peuvent être des composants Vue normaux tels que Home.vueet About.vue.

4. Utilisation du routeur dans le composant racine : utilisez le routeur Vue dans l'instance racine de Vue, généralement dansmain.js :

   import Vue from 'vue'
   import App from './App.vue'
   import router from './router' // 导入路由配置
   
   new Vue({
         
         
     el: '#app',
     router, // 使用路由配置
     render: h => h(App)
   })
   

5. Utiliser <router-link>et<router-view> : utilisez la balise dans le modèle <router-link>pour créer des liens de navigation et utilisez <router-view>la balise pour afficher le composant de vue de l'itinéraire actuel. Par exemple:

   <template>
     <div>
       <router-link to="/">Home</router-link>
       <router-link to="/about">About</router-link>
       
       <router-view></router-view>
     </div>
   </template>
   

6. Navigation et saut d'itinéraire : vous pouvez utiliser <router-link>pour implémenter la navigation d'itinéraire, ou vous pouvez utiliser la méthode du composant this.$router.push()pour effectuer un saut d'itinéraire programmatique.

Ce sont les méthodes d'utilisation de base de Vue Router. Il vous permet d'implémenter facilement la navigation et le changement d'itinéraire entre les pages de votre application Vue.js, rendant le développement d'applications monopage plus pratique et plus facile à maintenir. En définissant des configurations de routage et en associant des composants de vue, vous pouvez créer des applications riches d'une seule page et associer différents composants de vue à différentes routes d'URL.

Quelle est la différence entre Vue2 et Vue3 ?

Il existe des différences et améliorations importantes entre Vue.js 2 et Vue.js 3. Voici quelques-unes des principales différences et caractéristiques :

1. Optimisation des performances :

   • Vue 3 a apporté de nombreuses optimisations de performances sous le capot, notamment des mises à niveau du DOM virtuel, le rendant plus rapide et plus efficace.
   • Vue 3 introduit des stratégies d'optimisation telles que le chargement paresseux (Lazy Loading) et le levage statique (Static Hoisting) pour améliorer encore les performances.

2. API de composition：

   • Vue 3 introduit l'API Composition, une API basée sur les fonctions qui permet une organisation et une réutilisation plus flexibles de la logique des composants.
   • L'API Composition permet aux développeurs de diviser le code par fonction, améliorant ainsi la lisibilité et la maintenabilité du code.

3. Taille du paquet plus petite :

   • La bibliothèque principale de Vue 3 est plus petite et se charge donc plus rapidement.
   • Vue 3 prend en charge le chargement à la demande, permettant d'introduire uniquement les fonctions requises, réduisant ainsi davantage la taille du package.

4. Téléportation :

   • Vue 3 a introduit Teleport, qui permet de restituer le contenu des composants vers n'importe quel emplacement du DOM, ce qui est très utile dans la gestion des boîtes modales, des menus contextuels et d'autres scénarios.

5. Fragments：

   • Vue 3 prend en charge Fragments, permettant aux composants de renvoyer plusieurs éléments racine sans avoir besoin d'éléments de conteneur supplémentaires.

6. Modifications globales de l'API :

   • Vue 3 a apporté quelques modifications à l'API globale pour la rendre plus cohérente avec les normes JavaScript modernes.
   • Par exemple, Vue.componentchangez maintenant en app.component, Vue.directivechangez en app.directive, Vue.mixinchangez en app.mixin.

7. Nouveaux crochets de cycle de vie :

   • Vue 3 introduit de nouveaux hooks de cycle de vie tels que onBeforeMountet onBeforeUpdatepour fournir un contrôle plus précis et de meilleures opportunités d'optimisation des performances.

8. Améliorations de la prise en charge de TypeScript :

   • Vue 3 offre une prise en charge plus complète de TypeScript et offre une meilleure inférence de type et une meilleure vérification de type.

9. Améliorations des systèmes réactifs :

   • Vue 3 améliore le système réactif, offre une meilleure prise en charge de TypeScript et est plus efficace.

Dans l'ensemble, Vue.js 3 présente des améliorations significatives en termes de performances, d'expérience de développement et de maintenabilité. Cependant, Vue 2 reste une version stable avec un large écosystème et un large support, et les développeurs peuvent choisir la version à utiliser en fonction des besoins du projet. Si vous démarrez un nouveau projet, Vue 3 peut être un meilleur choix en raison de ses nombreux avantages et améliorations. Si vous maintenez un projet Vue 2, vous pouvez également envisager de migrer progressivement vers Vue 3 pour améliorer les performances et l'expérience de développement.

Pouvez-vous lister quelques nouvelles fonctionnalités de Vue3 ?

Voici quelques nouvelles fonctionnalités et améliorations importantes dans Vue.js 3 :

1. API de composition : L'API de composition est l'une des nouvelles fonctionnalités les plus marquantes de Vue 3. Il vous permet de diviser le code par fonction et d'organiser ensemble la logique du code associée, améliorant ainsi la maintenabilité et la réutilisabilité du code.

2. Téléportation : Téléportation est une nouvelle fonctionnalité qui vous permet de restituer le contenu d'un composant vers d'autres emplacements du DOM. Ceci est utile pour créer des composants tels que des modaux, des menus contextuels, etc.

3. Fragments : Vue 3 prend en charge Fragments, permettant à un composant de renvoyer plusieurs éléments racine sans avoir besoin d'éléments de conteneur d'encapsulation supplémentaires.

4. Modifications de l'API globale : Vue 3 a apporté quelques modifications à l'API globale pour la rendre plus cohérente avec les normes JavaScript modernes. Par exemple, Vue.componentpassez maintenant à app.component.

5. Optimisation des performances : Vue 3 a effectué de nombreuses optimisations de performances au niveau inférieur, notamment la mise à niveau du DOM virtuel, le chargement paresseux, la promotion statique et d'autres stratégies pour rendre l'application plus rapide et plus efficace.

6. Améliorations du système réactif : Vue 3 a amélioré le système réactif, offrant une meilleure prise en charge de TypeScript et un suivi des données réactifs plus efficace.

7. Prise en charge de TypeScript : Vue 3 offre une prise en charge plus complète de TypeScript, offrant une meilleure inférence de type et une meilleure vérification de type.

8. Taille du package plus petite : la bibliothèque principale de Vue 3 est plus petite, se charge plus rapidement et prend en charge le chargement à la demande, réduisant ainsi la taille du package.

9. Améliorations des hooks de cycle de vie : Vue 3 introduit de nouveaux hooks de cycle de vie tels que onBeforeMountet onBeforeUpdate, offrant un contrôle plus précis et des opportunités d'optimisation des performances.

10. Suspense : Vue 3 prend en charge la fonctionnalité Suspense, qui vous permet de gérer l'état de chargement des composants asynchrones avec élégance et d'offrir une meilleure expérience utilisateur.

11. Moteurs de rendu personnalisés : Vue 3 vous permet de créer des moteurs de rendu personnalisés, ce qui vous permet d'utiliser Vue dans différents environnements cibles, tels que le rendu côté serveur (SSR) ou les applications natives.

12. Améliorations du modèle V : Vue 3 améliore la syntaxe du modèle V, le rendant plus flexible et pouvant être utilisé pour la liaison bidirectionnelle de composants personnalisés.

Ces nouvelles fonctionnalités et améliorations font de Vue.js 3 un framework frontal plus puissant, efficace et flexible, aidant les développeurs à créer de meilleures applications et interfaces utilisateur d'une seule page.

Veuillez expliquer ce qu'est l'API de composition et quels sont ses avantages ?

L'API de composition est une nouvelle méthode d'organisation des composants introduite dans Vue.js 3. Elle vous permet de diviser et d'organiser la logique de code des composants par fonction. Il s'agit d'un style d'API basé sur des fonctions, par opposition à l'API d'options traditionnelle. Ses principaux avantages sont les suivants :

1. Organisation du code plus flexible : l'API Composition vous permet de diviser la logique de code d'un composant en plusieurs parties fonctionnellement liées, chaque partie est une fonction indépendante. Cela rend le code plus clair et plus facile à maintenir et à tester. Vous pouvez réutiliser la logique du code plus facilement et l'appliquer à plusieurs composants.

2. Meilleure inférence de type : lorsque l'API Composition est utilisée avec TypeScript,

Quelles optimisations de performances existe-t-il dans Vue 3 ?

Vue 3 introduit de nombreuses nouvelles fonctionnalités et améliorations en matière d'optimisation des performances pour améliorer les performances de vos applications. Voici quelques mesures d'optimisation des performances dans Vue 3 :

1. Réécriture du DOM virtuel : l'implémentation du DOM virtuel de Vue 3 a été réécrite pour la rendre plus rapide et plus légère. Cela signifie des performances de rendu et de mise à jour plus élevées.

2. Promotion d'arbre statique : Vue 3 peut détecter les sous-arbres statiques et les promouvoir en nœuds virtuels statiques pour éviter les opérations de rendu et de comparaison inutiles.

3. Chargement paresseux : Vue 3 prend en charge le chargement paresseux, qui ne restitue les sous-composants qu'en cas de besoin, réduisant ainsi la charge du rendu initial.

4. Meilleur traitement des événements : Vue 3 adopte une méthode d'écoute et de traitement des événements plus efficace pour améliorer les performances de traitement des événements.

5. Optimisation du compilateur : le compilateur de modèles de Vue 3 a été optimisé pour générer des fonctions de rendu plus efficaces et réduire les frais d'exécution.

6. Fragment et téléportation : Fragment et téléportation ont été introduits dans Vue 3. Ces fonctionnalités peuvent vous aider à organiser vos composants plus efficacement et à réduire les nœuds d'imbrication et de rendu inutiles.

7. Suspense : La fonctionnalité Suspense de Vue 3 vous permet d'afficher des espaces réservés lors du chargement d'un composant asynchrone, ce qui contribue à améliorer l'expérience utilisateur tout en réduisant le rendu inutile.

8. Système réactif réécrit : le système réactif de Vue 3 a été réécrit pour le rendre plus rapide et évolutif. Il utilise un proxy proxy, qui est plus efficace que Object.defineProperty de Vue 2.

9. API de composition : Vue 3 introduit l'API de composition, qui vous permet d'organiser et de réutiliser le code de manière plus flexible, ce qui contribue à améliorer les performances et la maintenabilité du code.

10. Tree-Shaking : Puisque Vue 3 utilise des modules ES pour organiser le code, les outils de construction tels que Webpack peuvent plus facilement effectuer du Tree-Shaking, incluant uniquement le code réellement utilisé par l'application, réduisant ainsi la taille du package.

Ces mesures d'optimisation des performances font de Vue 3 un framework front-end plus rapide et plus efficace, aidant à créer des applications Web plus réactives et fluides. Mais veuillez noter que l'optimisation des performances dépend également de votre application et de votre utilisation spécifiques. Par conséquent, dans les projets réels, vous aurez peut-être besoin d'une analyse plus approfondie des performances et d'ajustements.

Que sont les téléportations et les fragments, et quels sont leurs rôles dans Vue 3 ?

Dans Vue 3, Teleport et Fragments sont deux nouvelles fonctionnalités utilisées respectivement pour améliorer la structure de rendu et le contrôle de la position du rendu des composants. Voici ce qu'ils font et comment les utiliser :

1. Téléportation :

   • Fonction : Teleport vous permet de restituer le contenu d'un composant à différents emplacements de la structure DOM sans être limité par le composant parent. Ceci est utile pour gérer les modaux, les boîtes de dialogue, les messages de notification, etc. qui doivent être affichés à différents emplacements de la page.

   • Utilisation : Vous pouvez utiliser l'élément dans un modèle <teleport>et todéfinir son attribut sur un sélecteur cible pour spécifier dans quel élément DOM le contenu doit être rendu. Par exemple:

     <template>
       <div>
         <button @click="showModal">Show Modal</button>
         <teleport to="#modal-container">
           <Modal v-if="isModalVisible" @close="closeModal" />
         </teleport>
       </div>
     </template>
     

   Dans l'exemple ci-dessus, le contenu du composant Modal sera rendu id="modal-container"à l'intérieur de l'élément DOM dans la page.

2. Fragments :

   • Fonction : Les fragments vous permettent d'envelopper plusieurs éléments enfants dans un élément parent sans introduire d'éléments DOM supplémentaires. Cela permet de réduire l'imbrication de la structure DOM, rendant le code plus clair et plus concis.

   • Utilisation : Vous pouvez utiliser <template>l'élément ou la syntaxe spéciale fournie par Vue 3 v-fragmentpour créer un Fragment. Par exemple:

     <template>
       <div>
         <p>Paragraph 1</p>
         <p>Paragraph 2</p>
         <v-fragment>
           <p>Paragraph 3</p>
           <p>Paragraph 4</p>
         </v-fragment>
       </div>
     </template>
     

     Dans l'exemple ci-dessus, <v-fragment>deux éléments sont enveloppés <p>, mais la structure DOM finale rendue ne contient pas d'éléments parents supplémentaires.

Teleport et Fragments sont deux outils puissants dans Vue 3. Ils aident à gérer la structure de rendu des composants de manière plus flexible et plus claire, tout en améliorant la lisibilité et la maintenabilité du code. Ces deux fonctionnalités sont particulièrement utiles lorsqu’il s’agit de mises en page complexes et de composants réutilisables.

Quelles modifications ont été apportées à l'API globale dans Vue 3 ? Comment utiliser ces API modifiées ?

Vue 3 a apporté quelques modifications à l'API globale pour offrir de meilleures performances et fonctionnalités. Voici quelques-uns des changements majeurs et comment utiliser ces API modifiées :

1. Créez une instance Vue :

   • Avant modification (Vue 2) : Dans Vue 2, vous pouvez new Vue()créer une instance racine de Vue en utilisant .

   • Après modification (Vue 3) : Dans Vue 3, vous pouvez utiliser createApp()pour créer des instances d'application, par exemple :

     import {
             
              createApp } from 'vue';
     const app = createApp(App);
     app.mount('#app');
     

2. Enregistrement des composants globaux :

   • Avant modification (Vue 2) : Dans Vue 2, vous pouvez utiliser Vue.component()des composants d'enregistrement globaux.

   • Après modification (Vue 3) : Dans Vue 3, vous pouvez utiliser app.component()pour enregistrer des composants globaux, par exemple :

     app.component('my-component', MyComponent);
     

3. Filtrer :

   • Avant modification (Vue 2) : Vue 2 supporte les filtres, mais la notion de filtres a été supprimée dans Vue 3. Vous pouvez utiliser des propriétés ou des méthodes calculées pour remplacer la fonctionnalité des filtres.

4. Mixins :

   • Avant modification (Vue 2) : Dans Vue 2, vous pouvez utiliser mixinsdes options pour mélanger les options des composants.

   • Après modification (Vue 3) : Dans Vue 3, vous pouvez utiliser mixdes fonctions pour réaliser des fonctions similaires, par exemple :

     import {
             
              defineComponent, ref, mix } from 'vue';
     
     const mixin = {
             
             
       data() {
             
             
         return {
             
             
           message: 'Hello from mixin'
         };
       }
     };
     
     const MyComponent = defineComponent({
             
             
       mixins: [mixin],
       setup() {
             
             
         const count = ref(0);
         return {
             
             
           count
         };
       },
       template: `
         <div>
           {
              
              { message }}
           {
              
              { count }}
         </div>
       `
     });
     

5. Instructions personnalisées :

   • Avant modification (Vue 2) : Dans Vue 2, vous pouvez utiliser Vue.directive()pour enregistrer des directives personnalisées globales.

   • Après modification (Vue 3) : Dans Vue 3, vous pouvez utiliser pour app.directive()enregistrer des directives personnalisées globales, par exemple :

     app.directive('my-directive', {
             
             
       // 自定义指令的定义
     });
     

Il s’agit de quelques changements majeurs de l’API mondiale. Dans Vue 3, l'API globale est utilisée un peu différemment que dans Vue 2, vous devez donc faire attention à ces changements lors de la migration de votre projet ou de l'écriture d'un nouveau code Vue 3. Vous devez utiliser la nouvelle API au cas par cas pour vous assurer que votre application peut tirer pleinement parti des fonctionnalités et des performances de Vue 3.

Veuillez expliquer comment fonctionne le système réactif dans Vue 3 ?

L'une des principales fonctionnalités de Vue 3 est son système réactif, qui vous permet de synchroniser automatiquement les données et les vues dans votre application. Voici une brève explication du fonctionnement du système réactif de Vue 3 :

1. Initialisation :

   • Lorsque vous créez un composant ou une application Vue 3, Vue initialise une instance du système réactif.

2. Définition des données :

   • Vous setupcréez des données réactives dans la fonction du composant. Ceci peut être réalisé avec ref, reactive, ou .computed

3. Suivi des dépendances des données :

   • Lorsqu'un composant est rendu, Vue suit automatiquement les dépendances des propriétés de données. Cela signifie que Vue sait quelles propriétés de données sont utilisées pour restituer la vue.

4. Collection de dépendances réactives :

   • Vue collectera les dépendances des propriétés de données lors du rendu des composants et construira un graphique de dépendances.

5. Déclenché lorsque les données changent :

   • Lorsqu'une propriété de données réactive change, Vue informe les vues qui dépendent de cette propriété de données de la mise à jour.

6. Mise à jour par lots :

   • Vue 3 regroupera les notifications de plusieurs modifications de données pour minimiser les opérations de mise à jour du DOM et améliorer les performances.

7. File d'attente de mise à jour asynchrone :

   • Vue 3 utilise des files d'attente de microtâches (telles que Promiseou nextTick) pour gérer les mises à jour de données, garantissant que plusieurs modifications de données dans la même boucle d'événements ne déclenchent qu'une seule mise à jour de vue.

8. Voir la mise à jour :

   • Une fois les modifications de données notifiées à la vue, Vue 3 restituera les composants pertinents pour les maintenir synchronisés avec les dernières données.

9. Propriétés calculées et auditeurs :

   • Vue 3 vous permet d'utiliser des propriétés calculées ( computed) et des écouteurs ( watch) pour gérer la dérivation des données et écouter les modifications. Ces fonctionnalités s'appuient également sur des systèmes réactifs pour fonctionner.

En général, le système réactif de Vue 3 réalise une synchronisation automatique entre les données et les vues grâce au suivi des dépendances des données et aux mécanismes de mise à jour automatique des vues. Cela permet aux développeurs de se concentrer davantage sur le traitement des données sans avoir à manipuler manuellement le DOM, améliorant ainsi l'efficacité du développement et la maintenabilité du code.

Quelle est la différence entre Réf et Réactif ?

refet reactiveil existe deux manières différentes de créer des données réactives dans Vue 3, et elles présentent quelques différences importantes :

1. Type de référence :

   • ref: refUtilisé pour créer une seule donnée réactive. Il encapsule une valeur JavaScript normale (telle qu'un nombre, une chaîne, etc.) dans un .valueobjet avec des propriétés, ce qui en fait des données réactives.
   • reactive: reactiveUtilisé pour créer un objet réactif contenant plusieurs propriétés. Il accepte un objet JavaScript ordinaire et renvoie un objet proxy réactif, qui peut transformer les propriétés de l'objet en données réactives.

2. Mode d'accès :

   • ref: Vous pouvez .valueaccéder refaux valeurs via les propriétés. Par exemple : myRef.value.
   • reactive: Vous pouvez accéder directement reactiveaux propriétés au sein de l'objet. Par exemple : myReactiveObj.someProperty.

3. Objectif :

   • ref: Généralement utilisé pour envelopper des types de données de base, tels que des nombres, des chaînes, des valeurs booléennes, etc., ou pour envelopper .valuedes données qui doivent être mises à jour via .
   • reactive: généralement utilisé pour créer des objets de données réactifs contenant plusieurs propriétés, telles que des objets de configuration complexes ou des états de composants.

4. Exemple :

   • Utiliser pour refcréer des données réactives :

     import {
             
              ref } from 'vue';
     
     const count = ref(0); // 创建一个包装数字的 ref
     

   • Utiliser pour reactivecréer des objets réactifs :

     import {
             
              reactive } from 'vue';
     
     const person = reactive({
             
             
       name: 'Alice',
       age: 30
     }); // 创建一个包含多个属性的响应式对象
     

En général, refutilisé pour créer une seule donnée réactive, généralement utilisée pour envelopper les types de données de base. Il reactiveest utilisé pour créer des objets réactifs contenant plusieurs propriétés, généralement pour la gestion de structures de données complexes ou d'états de composants. La méthode que vous choisissez d'utiliser dépend de vos besoins spécifiques et de la structure de vos données.

Quelles améliorations ont été apportées à la prise en charge de TypeScript par Vue 3 ? Comment utiliser TypeScript avec Vue 3 ?

Vue 3 présente de nombreuses améliorations dans sa prise en charge de TypeScript, rendant le développement à l'aide de TypeScript et Vue 3 plus fluide et plus sûr. Voici quelques améliorations et directives clés pour l’utilisation de TypeScript :

1. Inférence de type et déclaration de type :

• Vue 3 fournit une inférence de type plus puissante, vous permettant d'obtenir une vérification de type plus précise.
• Vue 3 est livré avec des fichiers de déclaration TypeScript, vous n'avez donc pas besoin d'installer de fichiers de déclaration supplémentaires.

2. Composant fichier unique :

• Les parties des composants à fichier unique (fichiers .vue) <script>peuvent être écrites à l'aide de TypeScript.
• Vous pouvez ajouter des déclarations de type aux parties props, data, methodsetc. du composant pour une meilleure vérification de type.

3. Fournissez plus de définitions de types :

• Vue 3 fournit une multitude de définitions de types, y compris des définitions de types pour ref, reactive, , , et computedd' autres fonctions.watchprovideinject

4.CompositionAPI：

• L'API Composition de Vue 3 prend en charge TypeScript, ce qui facilite l'écriture d'une logique réutilisable.
• defineComponentLes composants de type sécurisé peuvent être facilement définis à l’aide de fonctions.

5. Accessoires de type sécurisé :

• Dans les composants, vous pouvez utiliser PropTypepour définir le type d'accessoires.
• Utilisez les propriétés facultatives et les valeurs par défaut de TypeScript pour garantir la sécurité du type des accessoires.

6. Inférence de type automatisée :

• Vue 3 peut automatiquement déduire les types de nombreuses propriétés, réduisant ainsi le besoin d'ajouter manuellement des déclarations de type.

7. Fonction de crochet de sécurité :

• Vue 3 prend en charge les fonctions de hook de cycle de vie de type sécurisé, telles que onMounted, onUpdatedetc.

8. Prise en charge du décorateur TypeScript :

• Vue 3 prend en charge les décorateurs TypeScript, qui peuvent être utilisés pour créer des mixins, des instructions personnalisées, etc.

9. Documentation TypeScript riche :

• La documentation de Vue 3 fournit une multitude d'exemples et d'instructions TypeScript pour aider les développeurs à mieux comprendre comment utiliser TypeScript dans Vue 3.

Lignes directrices pour l'utilisation de TypeScript :

1. Installez Vue 3 : assurez-vous que Vue 3 et TypeScript sont installés dans votre projet.
2. Créer des composants : utilisez .vuedes fichiers ou l'API de composition pour créer des composants. Vous pouvez ajouter des déclarations de type pour définir les accessoires et les données du composant.
3. Profitez de la prise en charge de l'éditeur : utilisez un éditeur prenant en charge TypeScript (tel que VS Code) pour une meilleure vérification du type et une meilleure saisie semi-automatique.
4. Suivez la documentation Vue 3 : consultez la documentation officielle de Vue 3, qui contient des instructions détaillées et des exemples sur la façon d'utiliser TypeScript.

Dans l'ensemble, Vue 3 fournit une prise en charge puissante de TypeScript, ce qui rend l'utilisation de TypeScript plus facile et plus fiable dans les projets Vue 3. Vous pouvez profiter de ces fonctionnalités pour améliorer la qualité du code, la maintenabilité et l’efficacité du développement.

Veuillez expliquer comment créer des directives personnalisées et des composants personnalisés dans Vue 3.

Certaines nouvelles fonctions de hook de cycle de vie ont été ajoutées à Vue 3 pour étendre la gestion du cycle de vie et la logique des composants. Voici les nouveaux hooks de cycle de vie et leurs utilisations :

1. beforeMount (nouveau):

   • Objectif : appelé avant le montage du composant. A ce stade, le DOM virtuel est préparé mais n'a pas encore été rendu dans le DOM réel. Peut être utilisé pour effectuer certains travaux de préparation.

2. avant la mise à jour (nouveau) :

   • Objectif : appelé avant la mise à jour du composant. A ce stade, le DOM virtuel a été mis à jour mais n'a pas encore été rendu dans le DOM réel. Peut être utilisé pour effectuer des travaux préparatoires avant la mise à jour.

3. mis à jour (nouveau):

   • Objectif : appelé après la mise à jour du composant. A ce stade, les données du composant ont été synchronisées dans la vue. Peut être utilisé pour effectuer certaines opérations liées au DOM mis à jour.

4. beforeUnmount (nouveau) :

   • Objectif : Appelé avant la désinstallation du composant. A ce stade, le composant est encore entièrement disponible. Peut être utilisé pour effectuer certains travaux de nettoyage.

5. démonté (nouveau):

   • Objectif : Appelé après la désinstallation du composant. A ce stade, toutes les ressources du composant ont été libérées et ne sont plus disponibles. Peut être utilisé pour effectuer certains travaux de nettoyage final.

Ces nouvelles fonctions de hook de cycle de vie sont principalement utilisées pour une gestion plus fine du cycle de vie, vous permettant d'effectuer des opérations spécifiques à différentes étapes du cycle de vie des composants. Par exemple, vous pouvez beforeMounteffectuer certaines opérations liées à la préparation du pré-rendu dans les hooks, ou updatedeffectuer certaines tâches liées aux opérations DOM mises à jour dans les hooks.

En plus des nouveaux hooks de cycle de vie, Vue 3 prend toujours en charge d'autres hooks de cycle de vie dans Vue 2, tels que created, mounted, beforeDestroyetc. destroyedCes hooks de cycle de vie vous permettent de gérer les cycles de vie des composants de manière plus flexible pour répondre à différents besoins.