Vue.jsの特徴やライフサイクル、Vuexなどについて整理する

Vue.jsの特徴やライフサイクル、Vuexなどについて整理する

Vue.js

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などを利用することで、プロジェクトの環境構築や構成管理の手間が省略かされ、継続的な開発を持続できるようになります。

 

参考:

Vue.js のための集中状態管理
vuex.vuejs.org

Vue.js(ビュージェイエス)は,インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボ…
gihyo.jp

Vue.js の作者Evan氏によるVue.jsの紹介スライドで触れられていた「Progressive Framework」の概念が非常に刺さる所があったのでV…
qiita.com

Hello!! Vue.js 最新プログレッシブフレームワーク入門

 

ライフサイクル

ライフサイクルフック

Vueのインスタンスは、インスタンスを生成時やDOM要素へのマウント時、データ更新時など、ある特定のタイミングでユーザが処理を行えるようにいくつかのライフサイクルフックが実行されます。

beforeCreate

インスタンスの初期化時に実行されます。dataなどのプロパティは生成前のためアクセスできません。

created

インスタンスの初期化後に実行されます。この時点でプロパティへのアクセスが可能になります。

beforeMount

マウント前に実行されます。この時点ではDOM要素にはアクセスできません。

mounted

マウント後に実行されます。この時点でDOM要素へのアクセスが可能になります。

beforeUpdate

DOM更新前に実行されます。

update

DOM更新後に実行されます。

beforeDestroy

インスタンスの破棄の前に実行されます。この時点ではプロパティへのアクセスは可能です。

destroyed

インスタンスが破棄された後に実行されます。この時点からプロパティへのアクセスはできません。

 

ライフサイクルフックの動きを確認する

実際にいくつかのライフサイクルフックを使って動きを確認してみました。

beforeCreate

インスタンス初期化時に実行されます。このタイミングでは、インスタンスは初期化前ですので、msgは呼ばれません。

created

インスタンス生成後に実行されるため、msgが呼び出されます。

 

beforeMount

インスタンスが作成された後、elementへのマウントされる前で実行されます。

そのためmsgは更新されず、「Welcome to Your Vue.js App」と表示されます。

 

mounted

elementへのマウントがされた後に実行されるため、msgが更新され「Update Your Vue.js App」と表示されます。

createdとの違いとしてmountedは、elementへのマウントが行われた後処理されます。また、mountedはSSRの場合は使えないので注意が必要です

 

参考:

Vue.js - The Progressive JavaScript Framework
jp.vuejs.org

Each Vue instance has many lifecycle hooks that let us run code at certain stage…
vueschool.io

 

Vuex

VuexとはVue.js アプリケーションのための 状態管理パターン + ライブラリです。

Vuexを使うことで、複雑に構成されたコンポーネントでのデータ管理の難しさを解決することができます。

Vuexという一つの入れ物にデータを入れることで、どのコンポーネントからでもVuex内に保持するデータへのアクセスが可能になります。

Actions

API等と非同期通信を行い、データを取得します。取得後はデータをコミットし、Mutationsを呼び出します。

Mutations

Actionsやコンポーネントからデータがコミットされた時に呼び出されます。唯一State内のデータを変更することが出来ます。

State

各コンポーネントで使用するデータはここに集約します。

Vuexの使いどころ

Vuexの使いどころについては以下の記事がとても参考になりました。

そもそもVuexを使うべきか、使うとしてもOrganismレベル以上のコンポーネントからのみStoreの参照、変更を許可するなど、どういったルールで運用すべきかを考慮することが大切です。

参考:

副作用を持ち、意識する範囲が広がるから。
python.ms