こんにちは。KOUKIです。
本記事は、VueJSのライフサイクルフックのメモです。
ライフサイクルフック
ライフサイクルフックとは、VueJSのアプリ起動時に特定の段階で自動的に実行してくれる関数を指します。
以下、公式サイトより。
| 関数名 | 意味 |
|---|---|
| beforeCreate | データの監視とイベント/ウォッチャのセットアップより前の、インスタンスが初期化されるときに同期的に呼ばれる。new Vue直後っぽい。 |
| created | インスタンスが作成された後に同期的に呼ばれる。この段階では、インスタンスは、データ監視、算出プロパティ、メソッド、watch/event コールバックらのオプションのセットアップ処理が完了したことを意味する。しかし、マウンティングの段階は未開始で、$elプロパティはまだ利用できない。 |
| beforeMount | render 関数が初めて呼び出されようと、マウンティングが開始される直前に呼ばれる。仮想DOMの段階。 |
| mounted | DOMへ仮想DOM($el)を突っ込む。新たに作成される vm.$el によって置き換えられるelに対して、インスタンスがマウントされたちょうど後に呼ばれる。ルートインスタンスがドキュメントの中の要素にマウントされる場合、vm.$el も mounted が呼び出されるときにドキュメントの中に入る。 |
| beforeUpdate | データが変更されるとき、DOM が適用される前に呼ばれる。これは、更新前に既存の DOM にアクセスするのに適している。 |
| updated | データが変更後、仮想 DOM が再描画そしてパッチを適用によって呼ばれる。このフックが呼び出されるとき、コンポーネントのDOMは更新した状態になり、このフックでDOMに依存する操作を行うことができる。しかしがながら、ほとんどの場合、無限更新ループに陥る可能性があるため、このフックでは状態を変更するのを回避すべき。 |
| beforeDestroy | Vueインスタンスが破棄される直前に呼ばれる。この段階ではインスタンスはまだ完全に機能している。尚、このフックはサーバサイドレンダリングでは呼ばれない。 |
| destroyed | Vueインスタンスが破棄された後に呼ばれる。このフックが呼ばれるとき、Vue インスタンスの全てのディレクティブはバウンドしておらず、全てのイベントリスナは削除されており、そして全ての子の Vue インスタンスは破棄される。 |
公式ページにライフサイクルフックのダイアグラムがありました。
これを見ればスッキリすると思います。
サンプル
JSFIDDLEでサンプルコードを展開しています。
|
1 2 3 4 5 6 7 8 9 |
<!-- HTML --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <h1> Hello, {{name}} </h1> <button @click="name = 'Hiroki'">Name Change</button> <button @click="destroy">Instance Destory</button> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
var data = { message: 'Hello', name: 'Harry' } new Vue({ el: '#app', data: data, beforeCreate: function() { console.log('beforeCreated') }, created: function() { console.log('created') }, beforeMount: function() { console.log('beforeMount') }, mounted: function() { console.log('mounted') }, beforeUpdate: function() { console.log('beforeUpdate') }, updated: function() { console.log('updated') }, beforeDestroy: function() { console.log('beforeDestroy') }, destroyed: function() { console.log('destroyed') }, methods: { destroy: function() { this.$destroy() } } }) |
ChromeかつF12でデベロッパーツールを開いていただいて、コンソールに出力される値を確認してください。
ボタンを押下すると、他のライフサイクルフックが発動します。
おわりに
VueJSも勉強していくと面白い機能がたくさんあります。一つ一つ理解して、アプリケーションを作っていきたいですね。
にほんブログ村
最近のコメント