Fonctions de cycle de vie dans Vue3 : maîtrisez rapidement le cycle de vie de Vue3

Vue3 est l'un des frameworks les plus populaires dans le monde front-end, et la fonction de cycle de vie de Vue3 est une partie très importante de Vue3. La fonction de cycle de vie de Vue3 nous permet de déclencher des événements spécifiques à des moments précis, améliorant ainsi le degré élevé de contrôlabilité des composants.

Cet article explorera et expliquera en détail les concepts de base des fonctions de cycle de vie de Vue3, le rôle et l'utilisation de chaque fonction de cycle de vie, ainsi que les cas de mise en œuvre, pour aider les lecteurs à maîtriser rapidement les fonctions de cycle de vie de Vue3.

1. Le concept de base de la fonction de cycle de vie de Vue3

La fonction de cycle de vie de Vue3 est une partie très importante de Vue3 et est une méthode qui est automatiquement appelée lors du rendu des composants. Il permet aux développeurs de gérer en conséquence lorsque les composants sont détruits, mis à jour ou initialisés. Semblable à la fonction de cycle de vie de React, la fonction de cycle de vie de Vue3 est principalement divisée en cinq étapes : « avant », « créé », « monté », « mis à jour » et « détruit ».

1. beforeCreate() : Cette fonction de hook est appelée après l'initialisation de l'instance. Les propriétés telles que les données et les méthodes n'ont pas encore été initialisées, le composant n'a donc pas été monté pour le moment. dans ce hook, $el n'est pas accessible dans la fonction.
2. created() : Cette fonction hook est appelée après la création de l'instance. Dans cette fonction hook, les attributs tels que les données et les méthodes ont été initialisés, mais $el n'a pas encore été rendu. Cette fonction de hook est un bon endroit pour effectuer des requêtes asynchrones.
3. beforeMount() : Cette fonction hook est appelée avant le montage du composant. Pendant le traitement de cette fonction hook, nous pouvons modifier le nœud DOM ou effectuer un autre travail d'initialisation.
4. Mounted() : Cette fonction de hook est appelée une fois le composant monté. Elle indique que le composant a été rendu et que vous pouvez commencer à utiliser le DOM.
5. beforeUpdate() : Cette fonction hook est appelée avant la mise à jour du composant. Dans cette fonction de hook, une sauvegarde ou une modification de l'état peut être effectuée.
6. updated() : Cette fonction hook est appelée après la mise à jour du composant. Dans cette fonction hook, vous pouvez effectuer certaines opérations de mise à jour du DOM.
7. beforeUnmount() : Cette fonction hook est appelée avant le démontage du composant. Dans cette fonction de crochet, vous pouvez effectuer certains travaux ultérieurs, tels que nettoyer les minuteries, etc.
8. unmount() : Cette fonction de hook est appelée après le démontage du composant, indiquant que le composant a été complètement détruit.

2. Le rôle et l'utilisation de chaque fonction du cycle de vie

1. beforeCreate()

La fonction beforeCreate() est appelée après l'initialisation de l'instance. À ce stade, l'instance de vue n'a pas été créée, les attributs tels que les données et les méthodes n'ont pas été initialisés et le composant n'a pas été monté à ce moment. Donc $el n’est pas accessible dans cette fonction hook.

Cette fonction de hook est généralement utilisée pour initialiser certains travaux importants. Par exemple, dans cette fonction de hook, vous pouvez effectuer certaines configurations globales, et vous pouvez également initialiser et définir certaines données ou composants. très utile et peut être utilisé pour préparer les données pour les opérations ultérieures.

Un exemple d'utilisation typique :

beforeCreate() {
  console.log('beforeCreate hook!');
}

2. created()

created() fonction hook dans Vue3 Appelée après l'instance est créée, l'instance Vue3 a été créée dans cette fonction. Dans cette fonction, nous pouvons accéder aux données et méthodes de l'instance, mais la page n'a pas encore été rendue.

Cette fonction de hook est généralement utilisée pour initialiser des instances. Par exemple, dans cette fonction de hook, vous pouvez demander des données, effectuer un traitement de données ou effectuer un travail d'initialisation de plug-in. et peut être utilisé pour préparer les données pour les opérations ultérieures.

Un exemple d'utilisation typique :

created() {
  console.log('created hook!');
}

3. beforeMount()

beforeMount() dans le rendu des composants était appelé avant. À ce stade, le composant a été initialisé et certaines opérations peuvent être effectuées dans cette fonction. Par exemple, le DOM peut être utilisé dans cette fonction hook.

Il est généralement recommandé de ne pas effectuer d'opérations fastidieuses dans cette fonction hook, car cela pourrait bloquer le premier rendu du DOM.

Un exemple d'utilisation typique :

beforeMount() {
  console.log('beforeMount hook!');
}

4. Mounted()

Mounted() La fonction hook est utilisée lorsque la fonction hook Le composant est appelé après le rendu. Dans cette fonction hook, nous pouvons accéder aux éléments DOM rendus et effectuer certaines opérations. Par exemple, dans cette fonction hook, nous pouvons obtenir la largeur et la hauteur de l'élément et d'autres informations.

Un exemple d'utilisation typique :

mounted() {
  console.log('mounted hook!');
}

5. beforeUpdate()

beforeUpdate() la fonction hook met à jour le composant appelé avant. Dans cette fonction de hook, une sauvegarde ou une modification de l'état peut être effectuée.

Cette fonction de hook est généralement utilisée dans certains états qui doivent être mis à jour. Par exemple, avant que l'état du composant ne change, cette fonction de hook est utilisée pour sauvegarder l'état vers un autre endroit à des fins de comparaison et de vérification. Dans le même temps, cette fonction hook peut également être utilisée pour une série de calculs au cours d'une période. Par exemple, les données requises peuvent être réobtenues dans cette fonction hook.

Un exemple d'utilisation typique :

beforeUpdate() {
  console.log('beforeUpdate hook!');
}

6. updated()

updated() fonction de hook lorsque le composant est La mise à jour est appelée ensuite. Dans cette fonction hook, vous pouvez effectuer certaines opérations après la mise à jour du DOM, comme réobtenir des informations telles que la largeur et la hauteur de l'élément.

这个钩子函数一般用于实现某些需要DOM元素更新后才能进行的操作，例如对比前后数据的信息，需要根据DOM元素的更新来做出相应的处理等。

一个典型的使用示例：

updated() {
  console.log('updated hook!');
}

7. beforeUnmount()

beforeUnmount()钩子函数在Vue3组件卸载之前被调用。在这个钩子函数中，可以进行一些善后的工作，例如清理定时器等等。

一个典型的使用示例：

beforeUnmount() {
  console.log('beforeUnmount hook!');
}

8. unmounted()

unmounted()钩子函数在Vue3组件卸载之后被调用。这个钩子函数表示组件已经被完全销毁。

这个钩子函数用于释放组件占用的内存和资源。

一个典型的使用示例：

unmounted() {
  console.log('unmounted hook!');
}

三、实现案例

在Vue3中实现生命周期函数非常简单，只需在组件中定义对应的函数即可实现。

下面是一个根据生命周期函数实现数据的获取和处理的实现案例：

<template>
  <div>
    <h2>{{ data }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '',
    };
  },
  beforeCreate() {
    console.log('开始第一步：数据初始化');
    // 进行异步请求，获取数据等操作
    this.data = '数据初始化成功';
  },
  created() {
    console.log('开始第二步：数据处理');
    // 对数据进行处理，例如进行格式化或者加工
    this.data = this.data + '-数据处理成功';
  },
  beforeMount() {
    console.log('开始第三步：准备数据');
    // 渲染组件之前，对数据进行进一步的处理
    this.data = this.data + '-数据准备完成！';
  },
  mounted() {
    console.log('开始第四步：操作DOM');
    // 操作DOM，例如获取元素的宽度或者高度等信息
  },
  beforeUpdate() {
    console.log('开始第五步：备份数据');
    // 对需要更新的状态进行备份，以便进行比较和校验
  },
  updated() {
    console.log('开始第六步：更新状态');
    // 根据DOM更新后的状态进行状态的更新
  },
  beforeUnmount() {
    console.log('开始第七步：清理定时器');
    // 清理组件中的定时器等占用内存的资源
  },
  unmounted() {
    console.log('开始第八步：释放内存');
    // 释放组件中占用的内存和资源
  },
};
</script>

以上实现案例中，我们根据生命周期函数分别进行了数据的初始化、数据的处理、数据的准备、DOM的操作、状态的备份、状态的更新、定时器的清理和内存的释放等八个步骤。

总结

通过本文对Vue3的生命周期函数的探究和讲解，我们可以深入了解和理解每个生命周期函数的作用和使用方法，用于帮助读者深入掌握Vue3的生命周期函数。同时，在实际项目中的应用中，我们也可以根据具体需求，在生命周期函数中实现相应的逻辑，以满足实际需求的业务场景。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!