【vue.js入門 #3】初心者向けにvue.jsの基本を解説!ライフサイクルフックとリアクティブ

初心者向けvue.jsの解説を行っていきます。

vue.js入門部分ではありますが、今までより少し複雑な処理に感じるかもしれません。

しかし、やってる事自体は全然難しいことではないので、初心者プログラマーの方でも問題なく理解できるんじゃないかと思います。

今回、解説していくのはvue.jsのライフサイクルフックとリアクティブについてなのですが、ピュアjavascriptやjqueryとは大きく違う部分でもあります。

これがあるからvue.jsが非同期通信で利用しやすという部分でもありますので、理解を深めていったら、vue.jsが更に面白くなっていくんじゃないかと思います。

vue.jsのライフサイクルフックとは

vue.jsはインスタンスを作成されたあと、決められた順番で処理が進んでいくのですが、この順番をライフサイクルといいます。

そして、ライフサイクルの途中に処理をを差し込むことができ、これをライフサイクルフックといいます。

ライフサイクルについて詳しく知りたい方は公式の方で確認してみてください。
https://jp.vuejs.org/v2/guide/instance.html

フックの種類はたくさんあるのですが、その中でもよく使うcreatedとbeforeDestroyについて紹介していきます。

createdとbeforeDestroyを処理を確認

ブラウザのコンソールでライフサイクルフックを確認してみましょう。

createdはインスタンスが生成された後に実行され、beforeDestroyはインスタンスが破棄される前に実行されます。

html

<div id="app">
   <button v-on:click="click_destroy">クリック</button>
</div>

js

var app = new Vue({
   el: '#app',

   created: function() {
       console.log('インスタンスが生成された後')
   },

   beforeDestroy: function() {
       console.log('インスタンスの破棄される前')
   },

   methods: {
       click_destroy: function(){
           this.$destroy()
       }
   }
})

ページにアクセスするとインスタンスが生成され、その後にcreatedのconsolelogが実行されます。

そして、ボタンをクリックして$destroy()でインスタンスが破棄されると、破棄される前にbeforeDestroyの、consolelogが実行されます。

これだけだと、具体的にどう使えば良いのかは、わかりませんよね?

次のリアクティブの解説と合わせて具体的なサンプルを書いていきます。

vue.jsのリアクティブとは

vueクラスのdataオプションに登録されたデータを、リアクティブデータといいます。

データオブジェクトの変化を検知して自動で反映させることができ、この仕組のことをリアクティブシステムと言います。

リアクティブシステムの仕組みがわかるコードサンプル

setIntervalとsettimeoutを使ってコードのサンプルを作成していきます。

setIntervalとは指定された時間のスパンで実行を繰り返す処理
settimeoutは指定された時間に一度だけ実行される処理です

今回、作成するサンプルはnew Date()を使ってブラウザに描画された現在の時間を、1秒毎に更新して描画させ、5秒後にインスタンスを破棄し更新を止めるというコードです。

html

<div id="app">
   {{today}}
</div>

js

var app = new Vue({
   el: '#app',
   data: {
       today: new Date()
   },

   //インスタンスが生成された後に実行
   created: function() {
       let that = this
       this.timer = setInterval(function(){
           that.today = new Date()
       }, 1000)
   },

   //インスタンスが削除される前に実行
   beforeDestroy: function() {
       clearInterval(this.timer)
   }
})

//5秒後にインスタンス削除
setTimeout(function(){
   app.$destroy()
}, 5000)

createdで実行されているsetIntervalのなかでthisをそのまま利用してしまうと、グローバルオブジェクト(window)に変わってしまうので、let that = thisに退避させて、thisの代わりにthatで利用しています。

インスタンスが破棄される前に実行されているclearIntervalで、setIntervalの処理を止めています。

リアクティブシステムはDOM操作が自動化されているvue.jsの良いところですね。

まとめ

  • ライフサイクルフックとはvue.jsのライフサイクルの途中に処理を差し込むこと
  • リアクティブシステムとは、データオブジェクトが変更されると、変化を検知し自動で描画を更新してくれ仕組み

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら