Méthodes de cycle de vie dans Vue 3

Introduction

Vue 3, le framework JavaScript progressif, offre aux développeurs un ensemble d'outils robustes pour créer des applications Web dynamiques et réactives. L'une des principales fonctionnalités de Vue réside dans ses méthodes de cycle de vie, qui permettent aux développeurs de se connecter à différentes étapes du cycle de vie d'un composant. Ces méthodes sont disponibles à la fois dans l'API Options et dans l'API Composition, offrant ainsi une flexibilité dans la façon dont vous structurez votre code.

Dans cet article, nous explorerons les méthodes de cycle de vie disponibles dans Vue 3, comparerons leur utilisation dans l'API Options et l'API Composition, et fournirons des exemples pratiques pour illustrer leur application.

Contenu

API d'options et API de composition

Dans Vue 3, vous pouvez définir des méthodes de cycle de vie à l'aide de l'API Options ou de l'API Composition. L'API Options est le moyen traditionnel de définir les options des composants, tandis que l'API Composition offre une approche plus flexible et modulaire, particulièrement utile pour les applications complexes.

Méthodes de cycle de vie

Vous trouverez ci-dessous un schéma illustrant les étapes du cycle de vie d'un composant Vue :

avantCréer

• API Options : Non nécessaire
• API de composition : Non nécessaire

Ce hook est appelé avant la création de l'instance du composant.

créé

• API Options : Non nécessaire
• API de composition : Non nécessaire

Ce hook est appelé après la création de l'instance du composant.

avantMont

• API Options : avantMontage
• API de composition : onBeforeMount

Ce hook est appelé juste avant que le composant ne soit monté sur le DOM.

Exemple :

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

monté

• API Options : montée
• API de composition : onMounted

Ce hook est appelé lorsque le composant est monté sur le DOM.

Exemple :

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

avant la mise à jour

• API Options : avant la mise à jour
• API de composition : onBeforeUpdate

Ce hook est appelé avant la mise à jour du composant.

Exemple :

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

mis à jour

• API Options : mise à jour
• API de composition : onUpdated

Ce hook est appelé après les mises à jour des composants.

Exemple :

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

avantDémonter

• API Options : avantDémontage
• API de composition : onBeforeUnmount

Ce hook est appelé juste avant le démontage du composant.

Exemple :

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

démonté

• API Options : démontée
• API de composition : onUnmount

Ce hook est appelé une fois le composant démonté.

Exemple :

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

erreurCapturée

• API Options : erreurCaptured
• API de composition : onErrorCaptured

Ce hook est appelé lorsqu'une erreur est capturée à partir d'un composant enfant.

Exemple :

<script>
export default {
  updated() {
    console.log('Component has been updated');
  }
}
</script>

<script setup>
import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('Component has been updated');
});
</script>

renduTracked

• API Options : renderTracked
• API de composition : onRenderTraked

Ce hook est appelé lorsqu'une dépendance réactive est suivie pendant le rendu.

Exemple :

<script>
export default {
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  }
}
</script>

<script setup>
import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
});
</script>

renduDéclenché

• API Options : renderTriggered
• API de composition : onRenderTriggered

Ce hook est appelé lorsqu'une dépendance réactive déclenche un rendu.

Exemple :

<script>
export default {
  unmounted() {
    console.log('Component has been unmounted');
  }
}
</script>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Component has been unmounted');
});
</script>

Résumé

Comprendre et utiliser les méthodes de cycle de vie dans Vue 3 est crucial pour gérer les différentes étapes du cycle de vie d'un composant. Que vous préfériez l'API Options ou l'API Composition, Vue 3 fournit un ensemble complet de hooks pour vous aider à contrôler efficacement le comportement de votre composant. En maîtrisant ces méthodes de cycle de vie, vous pouvez créer des applications Vue plus efficaces et plus maintenables.

Bon codage ! ?

Si vous avez des questions, n'hésitez pas à me les poser !

Si vous aimez mon post, soutenez-moi sur :

---

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!