今回は、ライフサイクルフックの使い方をざっくりと解説していきます。
Vue.js の書き方を最初から知りたいという方はこちら(^^)
参考書
ライフサイクルフックとは
Vue インスタンスの生成から消滅までをライフサイクルに見立て、その中のあるタイミング（フック）に行う処理を登録しておくことで、自動的にそのタイミングでその処理を呼び出すことができるという仕組みです。
８つのフック名があり、フック名をオプションに指定することで登録ができます。
| フック名 | 発生するタイミング |
|---|---|
| beforeCreate | インスタンスが生成され、データが初期化される直前 |
| created | インスタンスが生成され、データが初期化された直後 |
| beforeMount | インスタンスがDOMと結びつく直前 |
| mounted | インスタンスがDOMと結びついた直後 |
| beforeUpdate | データが更新され、DOMに反映される直前 |
| updated | データが更新され、DOMに反映された直後 |
| beforeDestroy | インスタンスが破棄される直前 |
| destroyed | インスタンスが破棄された直後 |
この中から３つのフックを使ってサンプルを作ります。
created フック
このフックは、インスタンスが生成されてデータが初期化された後に呼ばれます。
この段階では、インスタンスはまだDOM要素に結びついていません。
mounted フック
このフックは、インスタンスがDOM要素に結びついた後に呼ばれます。
DOM操作や、イベントリスナーの登録などはこのフックで行います。
beforeDestroy フック
このフックは、インスタンスが破棄される前に呼ばれます。
mounted フックでDOM要素に登録したイベントリスナーの破棄や、タイマー処理のクリアなどをこのフックで行います。
<div id="app"></div>var app = new Vue({
el: '#app',
created: function() {
console.log('created');
console.log(this.$el);
},
mounted: function() {
console.log('mounted');
console.log(this.$el);
},
beforeDestroy: function() {
console.log('beforeDestroy');
}
});$el は、コンポーネント内のルート要素のDOMを取得できるプロパティです。ここでは <div id=”app”></div> が返されます。
合計５つの内容をコンソールに表示するようにしました。ではコンソールを確認してみましょう。
created フックに登録した console.log(this.$el); は undefined になっており、
mounted フックに登録した console.log(this.$el); はきちんとDOMが表示されています。
つまり、created フックの時点ではまだインスタンスがDOM要素に結びついていなかったが、mounted フックでは結びついているということが確認できます。
また、この時点では ‘beforeDestroy’ がコンソールに表示されていません。
もちろんインスタンスが破棄されるような処理を行っていないからですね。
では、手動でこのインスタンスを破棄してみます。
コンソールで $destroy メソッドを呼び出すことで実行できます。
すると、
これで ‘beforeDestroy’ が表示されました。
つまり、beforeDestroy フックに登録した処理がきちんと行われたことが確認できました。
今回は以上になります。
ご覧いただきありがとうございました(^^)
続きはこちら↓
参考書
コメント