Cet article vous donnera une introduction détaillée aux trois phases du cycle de vie des composants deVue: phase de création, phase d'exécution et phase de destruction. J'espère qu'il sera utile à tout le monde !

Cet article parle des trois étapes du cycle de vie des composants Vue (création, exécution et destruction)

Cycle de vie du composant

Cycle de vie(Life Cycle) fait référence à un composant créé à partir de->Ventes Détruisez le toutLa scène met l'accent sur une période de temps. [Recommandations associées :Tutoriel vidéo vuejs,Développement web front-end]Fonction de cycle de vie

: Il s'agit d'une fonction intégrée fournie par le framework vue, qui sera automatiquement exécutée dans l'ordre avec le cycle de vie du composant.

Phase de création

beforePhase de création

Lorsque nous initialisons les événements et les fonctions de cycle de vie, lesprops

datadu composant/méthodespas encore sont créés et sont dans un état indisponible.

Copier après la connexion

Parce que les accessoires/données/méthodes ne peuvent pas être utilisés mais lorsque je l'ai appelé, toutes les consoles ont signalé des erreurs.

phase de création

Nous avons initialiséles accessoires, les données, les méthodes

, et les accessoires/données/méthodes du composant ont été créés. Tous sont dans un état utilisable,

mais la structure du modèle du composant n'est pas encore complète!

Copier après la connexion

La fonction de cycle de vie créée est très couramment utilisée. Dans le développement quotidien de projets, les méthodes des méthodes y sont souvent appelées,

demande des données au serveur

et transfère les données demandées vers les données pour utilisation. lors du rendu du modèle de modèle !

Copier après la connexion

beforeMount stage:

est basé surdata

template, compilés et générés en mémoirestructure HTML. La structure HTML compiléeen mémoire sera rendue aule navigateur. A l'heure actuelle, le navigateurn'a pas encorela structure DOM du composant actuel.

Copier après la connexion

stade monté

remplace l'élément DOM

spécifié par l'attribut el par la structure HTMLcompilée et générée dans

memory

, et la structure HTML dans la mémoire a a été rendu avec succès. Lorsqu'il atteint le navigateur, le navigateurcontient déjàlastructure DOMdu composant actuel.

Copier après la connexion

vue termine l'analyse du modèle et place les vrais éléments DOM qu'il a rencontrés pour la première fois sur la page (le montage est terminé) et les appels montés.

Copier après la connexion

Phase d'exécution

La phase dite d'exécution est l'interaction entre l'utilisateur et le composant

beforeUpdate阶段：

这个函数的触发的必要前提是，我们修改了 data 里面的数据。将要（注意：仅仅是将要，还没有呢）根据变化过后最新的数据，重新渲染组件的模板结构。

Copier après la connexion

updated阶段：

已经根据最新的数据，完成了组件的DOM结构的重新渲染。注意：当数据变化之后，为了能操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中。

Copier après la connexion

销毁阶段

完全销毁一个实例。清理它(vm)与其它实例的连接，接绑它的全部指令及事件监听器。

beforeDestroy阶段：

将要销毁此组件，此时尚未销毁，组件还处于正常工作状态。在这阶段一般做一些首尾工作。

Copier après la connexion

1）销毁后借助Vue开发者工具看不到任何信息。

2）销毁后自定义事件会失效，但原生的DOM事件依然有效

3）一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了

总结

生命周期：

1）又称：生命周期回调函数、生命周期函数、生命周期钩子。

2）含义：vue在关键时刻帮助我们调用一些特殊名称的函数。

3）生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4）生命周期函数中的this指向是 vm 或组件实例对象。

常用的生命周期钩子：

1）mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等(初始化操作)

2）beforeDestroy：清除定时器、绑定自定义事件、取消订阅消息等(收尾工作)

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。