Vue の中で非常に重要な分野の一つはライフサイクルであり、多くの内容が含まれています。各 Vue インスタンスは作成されるときに一連の初期化プロセスを経る必要があり、このプロセスが Vue のライフサイクルです。
各 Vue インスタンスは作成されるときに一連の初期化プロセスを経る必要があります —— 例えば、データの監視を設定し、テンプレートをコンパイルし、インスタンスを DOM にマウントし、データが変化したときに DOM を更新するなどです。この一連のプロセスをコンポーネントのライフサイクル（コンポーネントが登録から破棄されるまでの全過程）と呼びます。時にはコンポーネントのライフサイクルの特定のプロセスで、特定のコードを実行する必要があります。これに基づいて、Vue はライフサイクルフックを提供し、ユーザーが異なる段階で独自のコードを追加する機会を与えます。
しかしその前に、コンポーネントのライフサイクルと、ライフサイクルの各段階でコンポーネントが完了した部分と未完了の部分を詳しく紹介します。
一、コンポーネントのライフサイクル#
皆さんがよく知っている公式サイトの記事にあるライフサイクルの注釈図を載せます。
図から分かるように、Vue はライフサイクルのために 8 つのフック関数を提供しています。それぞれは：
- beforeCreate: 作成前
- created: 作成後
- beforeMount: マウント前
- mounted: マウント後
- beforeUpdate: 更新前
- updated: 更新後
- beforeDestroy: 破棄前
- destroyed: 破棄後
1.beforeCreate#
beforeCreate は Vue インスタンスが発生した後、データ観測 (data observer) と event/watcher イベントの設定の前に呼び出されます。
上の例では beforeCreate フック内で Vue の data と method を呼び出して、結果を見てみましょう：
Vue の data とメソッドにはアクセスできず、wath の前に実行されていることがわかります。
2.created#
インスタンスが作成された後に呼び出されます。この段階で、インスタンスは以下の設定を完了しています：データ観測 (data observer)、プロパティとメソッドの計算、watch/event イベントのコールバック。しかし、マウント段階はまだ始まっておらず、$el プロパティは現在見えません。
主な用途：データの呼び出し、メソッドの呼び出し、非同期関数の呼び出し
console の出力結果を見てみましょう。
created フックは Vue の data を取得し、Vue メソッドを呼び出し、元の HTML に直接読み込まれた DOM を取得できますが、テンプレートをマウントして生成された DOM（例えば：v-for ループで Vue.list から生成された li）にはアクセスできません。
3.beforeMount#
マウントが始まる前に呼び出されます：関連する render 関数（テンプレート）が初めて呼び出されます。
例えば、v-for で生成された HTML はまだページにマウントされていません。
beforeMount: function () {
console.log('beforeMount:',document.getElementsByTagName('li').length);
},
console に出力された 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 や watch を使用して監視します。
updated: function () {
console.log('updated フックが実行されました...');
console.log('updated:',this.message)
},
7.beforeDestroy#
インスタンスが破棄される前に呼び出されます。この段階で、インスタンスはまだ完全に利用可能です。
8.destroyed#
Vue インスタンスが破棄された後に呼び出されます。呼び出された後、Vue インスタンスが指示するすべてのものは解除され、すべてのイベントリスナーは削除され、すべての子インスタンスも破棄されます。このフックはサーバーサイドレンダリング中には呼び出されません。
結果
Vue インスタンスが破棄されるときにこの 2 つの関数が呼び出されることがわかります。