Vue.jsの特徴やライフサイクル、Vuexなどについて改めて理解を深めるためにも自分なりに整理しました。
Vue.jsの特徴 Progressive Framework
Vue.jsの特徴として、Progressive Frameworkという概念に基づいて開発されています。
ビルドシステムを利用せずにVue.js単体で使うことやVuexやvue-routerを使って動的なWebアプリケーションの構築もできます。
Declative Rendering 宣言的なDOMレンダリングに関する領域
テンプレートにレンダリングする対象を宣言的に記載することでDOMレンダリングやユーザによる入力データの同期が可能になります。Vue.jsでは本体自体でこの領域をサポートしているため、LPのようなシンプルなWebサイトはじめ、小規模的なものはこの領域で解決できます。
Component System UIをモジュール化して再利用する必要がある領域
Vue.js本体自体にコンポーネント化する機能があるため、それによって開発効率を向上させることが可能になります。
Client-side Routing WebサイトがSPAとして必要とされるWebアプリケーションの領域
Vue.jsが提供しているルーティングライブラリのvue-routerを利用することで、これまでに作成したコンポーネントでSPAに対応することが可能になります。
Large-scale State Management コンポーネント間で状態の共有方法が必要となる領域
Vue.jsが提供している状態管理ライブラリのVuexを利用することで、既存のコンポーネントを拡張する形で状態を集中管理することが可能になります。
Build System コンポーネント管理やプロジェクト構成などの領域
Vue.jsが提供しているvue-cliやvue-loaderなどを利用することで、プロジェクトの環境構築や構成管理の手間が省略かされ、継続的な開発を持続できるようになります。
参考：
Hello!! Vue.js 最新プログレッシブフレームワーク入門
ライフサイクル
ライフサイクルフック
Vueのインスタンスは、インスタンスを生成時やDOM要素へのマウント時、データ更新時など、ある特定のタイミングでユーザが処理を行えるようにいくつかのライフサイクルフックが実行されます。
beforeCreate
インスタンスの初期化時に実行されます。dataなどのプロパティは生成前のためアクセスできません。
created
インスタンスの初期化後に実行されます。この時点でプロパティへのアクセスが可能になります。
beforeMount
マウント前に実行されます。この時点ではDOM要素にはアクセスできません。
mounted
マウント後に実行されます。この時点でDOM要素へのアクセスが可能になります。
beforeUpdate
DOM更新前に実行されます。
update
DOM更新後に実行されます。
beforeDestroy
インスタンスの破棄の前に実行されます。この時点ではプロパティへのアクセスは可能です。
destroyed
インスタンスが破棄された後に実行されます。この時点からプロパティへのアクセスはできません。
ライフサイクルフックの動きを確認する
実際にいくつかのライフサイクルフックを使って動きを確認してみました。
beforeCreate
インスタンス初期化時に実行されます。このタイミングでは、インスタンスは初期化前ですので、msgは呼ばれません。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, beforeCreate () { console.log('beforeCreate：' + this.msg) } } </script> |
1 | // beforeCreate：undefined |
created
インスタンス生成後に実行されるため、msgが呼び出されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, created () { console.log('created：' + this.msg) } } </script> |
1 | // created：Welcome to Your Vue.js App |
beforeMount
インスタンスが作成された後、elementへのマウントされる前で実行されます。
そのためmsgは更新されず、「Welcome to Your Vue.js App」と表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ... <h1>{{ msg }}</h1> ... <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, beforeMount () { this.msg = 'Update Your Vue.js App' } } </script> |
1 | // Welcome to Your Vue.js App |
mounted
elementへのマウントがされた後に実行されるため、msgが更新され「Update Your Vue.js App」と表示されます。
createdとの違いとしてmountedは、elementへのマウントが行われた後処理されます。また、mountedはSSRの場合は使えないので注意が必要です
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ... <h1>{{ msg }}</h1> ... <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted () { this.msg = 'Update Your Vue.js App' } } </script> |
1 | // Update Your Vue.js App |
参考：
Understanding the Vue.js Lifecycle Hooks - A Vue.js Lesson From...
Vuex
VuexとはVue.js アプリケーションのための 状態管理パターン + ライブラリです。
Vuexを使うことで、複雑に構成されたコンポーネントでのデータ管理の難しさを解決することができます。
Vuexという一つの入れ物にデータを入れることで、どのコンポーネントからでもVuex内に保持するデータへのアクセスが可能になります。
Actions
API等と非同期通信を行い、データを取得します。取得後はデータをコミットし、Mutationsを呼び出します。
Mutations
Actionsやコンポーネントからデータがコミットされた時に呼び出されます。唯一State内のデータを変更することが出来ます。
State
各コンポーネントで使用するデータはここに集約します。
Vuexの使いどころ
Vuexの使いどころについては以下の記事がとても参考になりました。
そもそもVuexを使うべきか、使うとしてもOrganismレベル以上のコンポーネントからのみStoreの参照、変更を許可するなど、どういったルールで運用すべきかを考慮することが大切です。
参考：