2019年09月01日更新
vue.jsのライフサイクルフックとは？mountedとcreatedの違いも解説！
Webアプリケーションを作成する時に使うVueについて紹介します。Vueにはライフサイクルフックという機能があります。mountedやcreatedなどのフックの活用方法。特に使用頻度の高いmountedやcreatedの違いを中心に紹介します。
目次
vue.jsとは？
Vueとは、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。Webアプリケーションなどのネットワークを介して使用されるアプリケーションソフトウェアのインターフェイス、パソコン（機械）と使用者（人間）をつながりを構築すためのフレームワークです。
オープンソース型のJavaScriptフレームワーク
JavaScriptとは、複数存在するプログラミング言語の一つであり、Webブラウザ上で動作するウェブサイトの構築などの開発に用いられています。元々JavaScriptはライブラリの使用だけで十分機能していました。しかし、Webアプリケーションの機能が充実しフレームワークも使用されるようになりました。
オープンソース型のJavaScriptフレームワークの一つしてVue.jsは機能がシンプルであり自分が使いやすいように機能拡張も行うこともできます。
vue.jsの特徴と長所
Vue.jsの特徴と長所は、
•親しみやすい
数あるJavaScriptフレームワークの中でVue.jsは比較的に学習コストが低く、使用後すぐにWebアプリなどの開発に利用できます。
•融通が効く
ライブラリとフレームワークの間で拡張できるエコシステムが備わっておりストレスフリーの状態で作業を進めます。
•高性能
20KB min+gzip、速いVirtual DOM、view層に焦点を絞ることでVue.js以外のライブラリや既存のプロジェクトにもスムーズに統合することが可能になっています。
以上の三つがVue.jsの主な特徴と長所です。
vue.jsのライフサイクルフックとは？
Vue.jsには、ライフサイクルフックが存在しています。Vue.jsの初期化のある決められたタイミングで実行される関数のことです。
vue.jsの初期化の任意のタイミングで実行される関数
ライフサイクルフックは、Vue.jsの初期化時のタイミング（インスタンが作成されてから削除される間）に実行できる行為のことです。
Vueには、5つのライフサイクルフックが介入できるタイミングがあります。
1.Vueインスタンスの生成2.DOMへのマウント3.画面の更新4.Vueインスタンスの破棄5.エラー時このタイミング時にフック内に記述をすることで自分のしたい処理をすることができます。
※初期化とは、Vue.jsが使用できるようにする処理のことです。
vue.jsのライフサイクルフックの具体例
1.Vueインスタンの生成時には、beforecreated、created。
2.DOMへのマウント時には、beforeMount、mounted。
3.画面の更新時には、beforeUpdate、updated。
4.Vueインスタンスの破棄時には、beforeDestroy、destroyed。
5.エラー時や他の状況時には、activated、deactivated、errorCaptured。
それぞれの状況でVueに表示されるフックは以上です。このフックを目安にライフサイクルフックを実行できます。
mountedとcreatedの違い
ここでは、Vueのライフサイクルフック時に表示される基本のフックであるmountedとcreatedの違い、特徴使い分け方を紹介していきます。
mountedの特徴
Vueのライフサイクルフックで使われるmountedは、インスタンスやコンポーネントがマウントされたときに実行されます。ブラウザへのレンダリングが完了している状態です。そのため、DOMに直接アクセスすることが可能です。
createdの特徴
Vueのライフサイクルフックで使用されるフックの一つであるcreatedは、インスタンスやコンポーネントの初期化後に表示されます。データの参照、インベントの初期化が完了している状態であり、初期データを使って処理をするときに使うと便利です。
mountedとcreatedの使い分け例
createdの場合：Ajax通信をしデータ初期化
mounted時に同じことをしてもほとんど同じ結果を得ることができますが、mountedよりcreatedは、速く表示されるためDOMマウントが行われる準備時間が短縮されデータ反映までの待機時間が短くなる利点があります。
mountedの場合：Vueではないプラグインを初期化
Vue以外のJavaScriptライブラリはほとんどがJavaScriptやjQueryで構成されています。これらのライブラリもVueで使用できます。使用するためには初期化をする必要がありDOM要素が必要とされることがあり、その初期化時に
DOMに直接アクセスできるmountedが有効です。
以上がVueのmountedとcreatedの使用例です。
vue.jsでmountedとcreatedを使い分けよう！
この記事では、Vueの特徴であるライフサイクルフックについて紹介してきました。ライフサイクルフックは、5つの任意のタイミング（1.Vueインスタンスの生成2.DOMへのマウント3.画面の更新4.Vueインスタンスの破棄5.エラー時）に自分のしたい処理をすることができます。
さらに、Vueを使用する上で最も使用頻度が高いフックであるmountedとcreatedの違いと使用例も紹介しました。この２つのフックを活用できれば基本的なWebアプリケーションを作成も可能です。Vueを活用して自分だけのWebアプリケーションを作りましょう。
