Explication détaillée du cycle de vie de VueJS et de l'application de la fonction hook

Cet article parle du cycle de vie de VueJS et de l'application de la fonction hook Si vous ne comprenez pas le cycle de vie de VueJS et l'application de la fonction hook. , alors nous allons nous lever et lire cet article. Bon, assez de bêtises et allons droit au but

Bonjour les amis ! Heureusement, vous pouvez voir mon article, donc à ce stade, vous devriez vouloir avoir une compréhension plus générale du cycle de vie de vuejs et connaître les scénarios d'application de certaines des fonctions de hook dans le développement réel. directement ci-dessous. Imaginez-le.

1. Le cycle de vie de vue

En termes simples, le cycle de vie est le processus temporel allant de la création à la disparition des choses. Ensuite, le cycle de vie de vue est le processus allant de sa création à sa destruction, qui comprend le démarrage de la création, l'initialisation des données, la compilation des modèles, le montage de dom (rendu), le rendu-> mise à jour-> rendu, la destruction (désinstallation), etc. processus.

Ensuite, les fonctions hook sont responsables de leurs propres responsabilités. Les plus couramment utilisées sont les fonctions créées et montées. La logique métier associée peut être écrite dans les fonctions.

2. Fonction Hook

avantCréer

Après l'initialisation de l'instance, l'observation des données et les événements sont appelés avant la configuration de l'initialisation du cycle de vie.

created

est appelé après la création de l'instance. À cette étape, l'instance a terminé la configuration suivante : observation des données, propriétés et méthodes opérations et rappels d'événements. Cependant, la phase de montage n'a pas encore commencé, et l'attribut $el est actuellement invisible.

beforeMount

est appelé avant le début du montage : la fonction de rendu associée est appelée pour la première fois, À ce stade, il existe un DOM virtuel.

monté

el est remplacé par le vm.$el nouvellement créé et est appelé après son montage sur l'instance. Ce hook, restitue le vrai DOM .

beforeUpdate

est appelé avant la mise à jour des données, ce qui se produit avant le rendu du DOM virtuel et patché. Vous pouvez modifier davantage l'état dans ce hook, ce qui ne déclenchera pas de processus de rendu supplémentaire.

mis à jour

Ce hook est appelé après le re-rendu et l'application de correctifs du DOM virtuel en raison de modifications de données.

Lorsque ce hook est appelé, le composant DOM a été mis à jour, vous pouvez donc désormais effectuer des opérations qui dépendent du DOM. Dans la plupart des cas, cependant, vous devez éviter de changer d'état pendant cette période, car cela pourrait provoquer une boucle infinie de mises à jour.

Remarque : ce hook n'est pas appelé lors du rendu côté serveur.

beforeDestroy

Appelé avant que l'instance ne soit détruite. À ce stade, l'instance est toujours disponible.

destroyed

Appelé après la destruction de l'instance de vue. Après l'appel, tout ce qui est indiqué par l'instance vue ne sera plus lié, tous les écouteurs d'événements seront désinstallés et supprimés et toutes les instances enfants seront détruites.

Il convient de noter : ce hook n'est pas appelé lors du rendu côté serveur.

Recommandations associées :

Exemple détaillé de la fonction de correspondance de recherche Vuejs

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!