Vue で非常に重要な領域の 1 つであるライフサイクルについて学ぶ必要があります。ライフサイクルには多くの内容が含まれています。各 Vue インスタンスは、作成時に一連の初期化プロセスを経る必要があります。このプロセスは Vue のライフサイクルです。
各 Vue インスタンスは、作成時に一連の初期化プロセスを経る必要があります。たとえば、データの監視の設定、テンプレートのコンパイル、インスタンスの DOM へのマウント、データの変更時の DOM の更新などが必要です。これらの一連のプロセスをコンポーネントの「ライフサイクル」と呼びます（コンポーネントの登録から破棄までの全体のプロセス）。時には、コンポーネントのライフサイクルの特定の段階で、特定のコードを実行する必要があります。そのため、Vue は「ライフサイクルフック関数」を提供し、ユーザーに自分のコードをさまざまな段階に追加する機会を与えます。
しかし、その前に、コンポーネントのライフサイクルと、各段階でコンポーネントが完了した部分と未完了の部分について詳しく説明します。
1. コンポーネントのライフサイクル#
ライフサイクルについての公式ウェブサイトの記事でよく知られている図を掲載します。
図からわかるように、Vue はライフサイクルのために 8 つのフック関数を提供しています。それぞれ次のようになります：
- beforeCreate: 作成前
- created: 作成後
- beforeMount: マウント前
- mounted: マウント後
- beforeUpate: 更新前
- upated: 更新後
- beforeDestoy: 破棄前
- destoyed: 破棄後
1. beforeCreate#
beforeCreate は Vue インスタンスが作成された後、データの監視（データオブザーバー）やイベント / ウォッチャーのイベント設定の前に呼び出されます。
上記の例では、beforeCreate フック内で Vue のデータとメソッドを呼び出しています。結果を見てみましょう：
Vue のデータとメソッドにアクセスできず、ウォッチャーの前に実行されることがわかります。
2. created#
インスタンスが作成された後に呼び出されます。この段階では、データの監視（データオブザーバー）、プロパティとメソッドの計算、ウォッチ / イベントのイベントコールバックが完了しています。ただし、マウントフェーズはまだ開始されていませんので、$el プロパティは現時点では見えません。
主な用途：データの呼び出し、メソッドの呼び出し、非同期関数の呼び出し
コンソールに出力された結果を見てみましょう。
created フックでは、Vue のデータにアクセスし、Vue のメソッドを呼び出し、元の HTML に直接ロードされた DOM にアクセスできますが、マウントテンプレートから生成された DOM（たとえば、v-for ループで Vue.list を使用して生成された li）にはアクセスできません。
3. beforeMount#
マウントが開始される前に呼び出されます。関連するレンダリング関数（テンプレート）が最初に呼び出されます。
たとえば、v-for で生成された HTML はまだページにマウントされていません
beforeMount: function () {
console.log('beforeMount:',document.getElementsByTagName('li').length);
},
コンソールに出力される beforeMount は 1 です。
4. mounted#
el が新しく作成された vm.$el に置き換えられ、インスタンスにマウントされた後にこのフックが呼び出されます。
初期値のある DOM のレンダリング、例えば初期データの list からレンダリングされた li は、ここでのみ取得できます
mounted: function () {
console.log('mounted:',document.getElementsByTagName('li').length);
},
結果は mounted: 3 です。ここまでマウントされているため、li の数を取得できます。
5. beforeUpdate#
データが更新されると呼び出され、仮想 DOM の再レンダリングとパッチ適用の前に発生します。このフック内で状態をさらに変更することができますが、追加の再レンダリングプロセスはトリガーされません。
Vue のデータを変更すると、この関数が呼び出されます。
beforeUpdate: function () {
console.log('beforeUpdate 関数が実行されました。');
console.log('beforeUpdate:'+this.message)
},
6. updated#
データの変更による仮想 DOM の再レンダリングとパッチ適用の後にこのフックが呼び出されます。
このフックが呼び出されると、コンポーネントの DOM はすでに更新されているため、DOM に依存する操作を実行できます。ただし、ほとんどの場合、この期間中に状態を変更することは避けるべきです。なぜなら、これにより無限ループの更新が発生する可能性があるためです。
このフックはサーバーサイドレンダリング中には呼び出されません。
データが更新されると呼び出されます（Vue のすべてのデータは更新されると呼び出されます）。データを一括して処理する場合は、このフックを使用できます。異なるデータの更新に対して異なる処理を行いたい場合は、nextTick を使用するか、ウォッチャーを使用することができます。
updated: function () {
console.log('updated 関数が実行されました...');
console.log('updated:',this.message)
},
7. beforeDestroy#
インスタンスが破棄される前に呼び出されます。この段階では、インスタンスはまだ完全に使用可能です。
8. destroyed#
Vue インスタンスが破棄された後に呼び出されます。呼び出されると、Vue インスタンスに関連するすべてのものがバインド解除され、すべてのイベントリスナーが削除され、すべての子インスタンスも破棄されます。このフックはサーバーサイドレンダリング中には呼び出されません。
結果
Vue インスタンスが破棄されると、これらの 2 つの関数が呼び出されることがわかります。