【Vue.js 入門】ライフサイクルフックの使い方

Vue.js

今回は、ライフサイクルフックの使い方をざっくりと解説していきます。


Vue.js の書き方を最初から知りたいという方はこちら(^^)



参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...

ライフサイクルフックとは

Vue インスタンスの生成から消滅までをライフサイクルに見立て、その中のあるタイミング(フック)に行う処理を登録しておくことで、自動的にそのタイミングでその処理を呼び出すことができるという仕組みです。


8つのフック名があり、フック名をオプションに指定することで登録ができます。

フック名発生するタイミング
beforeCreateインスタンスが生成され、データが初期化される直前
createdインスタンスが生成され、データが初期化された直後
beforeMountインスタンスがDOMと結びつく直前
mountedインスタンスがDOMと結びついた直後
beforeUpdateデータが更新され、DOMに反映される直前
updatedデータが更新され、DOMに反映された直後
beforeDestroyインスタンスが破棄される直前
destroyedインスタンスが破棄された直後



この中から3つのフックを使ってサンプルを作ります。

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> が返されます。


合計5つの内容をコンソールに表示するようにしました。ではコンソールを確認してみましょう。

created フックに登録した console.log(this.$el); は undefined になっており、
mounted フックに登録した console.log(this.$el); はきちんとDOMが表示されています。

つまり、created フックの時点ではまだインスタンスがDOM要素に結びついていなかったが、mounted フックでは結びついているということが確認できます。


また、この時点では ‘beforeDestroy’ がコンソールに表示されていません。
もちろんインスタンスが破棄されるような処理を行っていないからですね。


では、手動でこのインスタンスを破棄してみます。
コンソールで $destroy メソッドを呼び出すことで実行できます。

すると、

これで ‘beforeDestroy’ が表示されました。
つまり、beforeDestroy フックに登録した処理がきちんと行われたことが確認できました。





今回は以上になります。
ご覧いただきありがとうございました(^^)

続きはこちら↓




参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...

コメント

コンタクトフォーム

    タイトルとURLをコピーしました