BACK TO BLOG

Vueメモ

2021-06-27

昔、vue勉強してた時にメモ取ってたの発掘したので一応載せとく。

  • マウントとは、既存のDOM要素をVue.jsが生成するDOM要素で置き換えること

  • $watchメソッドはVueインスタンスの変更を検知してそれをもとに動作する

  • computedはあるデータから派生するデータをプロパティとして公開する仕組み、データそのものに何らかの処理を与えたものをプロパティにしたい時に使用する

  • v-forをしようする際は原則v-bind:keyを使用する

ライフサイクル

フックの名前 フックが呼ばれるタイミング
beforeCreate インスタンスが生成され、データが初期化される前
created インスタンスが生成され、データが初期化された後
beforeMount インスタンスがDOM要素にマウントされる前
mounted インスタンスがDOM要素にマウントされた後
beforeUpdate データが変更され、DOMに適用される前
updated データが変更され、DOMに適用された後
beforeDestroy Vueインスタンスが破棄される前
destroyed Vueインスタンスが破棄される後

createdはVuexを導入していない小規模のアプリで、Web APIと通信してデータに関する処理を開始したり、serIntervalやsetTimeoutで繰り返し実行したりするタイマー処理を開始するポイントとして利用する

moutedはDOM操作やイベントリスナーの登録が必要な場合にこのフックで行う

beforeDestroyはmountedでDOM要素に登録したイベントリスナーの破棄や、タイマー処理のクリアといった後始末を行う

親コンポーネントから子コンポーネントへデータを渡すには、propsオプションを利用する

props: {
	親から受け取る属性名: {
		type: StringやObjectなどのデータ型,
		default: デフォルト値,
		required: 必須かどうかの真偽値,
		validator: バリデーション用の関数
	}
}

propsは親からのテンプレート属性(v-bind)経由で渡す

子コンポーネントから親コンポーネントへの通信では、カスタムイベントを使用する

  • イベントのlisten(親）：　$on(eventName)
  • イベントのtrigger(子)：　$emit(eventName)

.native修飾子は親の要素で起きたclickイベントなどネイティブなイベントをトリガーにして子のメソッドを実行する

propsの値を双方向バインディングしたい場合は.sync修飾子を用いて擬似的に実現する

Vue Router

Vue Routerでは、ページ遷移が実行される前後に処理を追加できるフック関数が提供されている

router.beforeEachに関数をセットするとページ遷移が起こる直前にその関数が実行される

全ての遷移に対してではなく特定のルート単位でフックを追加するには、Vue Router初期化時のルート定義の時個別に設定する(beforeEnter)

ルート定義時ではなく、コンポーネント側でもフック関数は定義できる

beforeRouteEnter : コンポーネントが表示されるタイミングのフック関数

beforeRouteLeave : 次の遷移の発生によりコンポーネントが去っていく際のフック関数（例:保存していない変更がある時にページを去る際にconfirmを表示する）

watchは、算出プロパティを汎用的にしたVueコンポーネントのオプション

$routerはRouterインスタンスを表す、アプリケーション全体として履歴をどのように管理するかを指定する設定や、router-link要素を使わずにプログラムでページ遷移を実行する場合に使用する

this.$route.paramsなどでアクセスしているのはRouteオブジェクト、ページ遷移によるルーティングが発生するごとに生成される、現在アクティブなルートの状態を保持したオブジェクトで現在のパスやURLパラメーターなどの情報を取得できる

Routerインスタンスの代表的なプロパティとメソッド

プロパティ 説明
app ルーターが使用されているrootのVueインスタンス
mode ルーターのモード
currentRoute Routeオブジェクトとして表される現在のルート
push() ページ遷移の実行。historyスタックに新しいエントリを追加し、ブラウザの戻るボタンがクリックされた際には前のURLに戻る
replace() ページ遷移の実行。historyスタックには新しいエントリを追加しません
go(n) historyスタックの中でどのくらいステップを進めるか、もしくは戻るのかを表す1つのintegerをパラメータとして受け取る
back() historyスタックを1つ戻す。
forward() historyスタックを1つ進める。
addRoutes(routes) 動的にルートをルーターに追加できる

Routeオブジェクトの代表的なプロパティ

プロパティ 説明
path 現在のルートのパスに対応した文字列
params 定義したURLパターンにマッチした現在のパラメーターをkey/valueペアで保持するオブジェクト。もしパラメーターがない場合、この値は空オブジェクトになる
query クエリ文字列のkey/valueペアを保持するオブジェクト。例えば/foo?user=1というパスの場合、$route.query.user==1となる。もしクエリがない場合は、この値は空オブジェクトになる
hash URLに#によるハッシュがある時の現在のルートのハッシュ値を取得できる。もしハッシュがない場合、この値は空オブジェクトになる
fullpath クエリやhashを含む全体のURL
name 名前付きルートで指定された名前

Transition

trnsitionコンポーネントは、自身が囲んでいるコンポーネントあるいは要素が出入りする際にトランジションを追加する

  • v-ifの条件が変わった時
  • v-showの条件が変わった時
  • 動的コンポーネントのis属性値が変わった時

トランジションクラス

クラス名 説明
v-enter 要素が挿入される前に付与され、アニメージョン開始時に削除されるクラス。挿入のアニメーションの初期スタイルを適用するために使用する。
v-enter-to 挿入のアニメーションの開始時に付与され、アニメーション終了時に削除されるクラス。挿入のアニメーションの終了時のスタイルを適用するために使用する。
v-enter-active 要素の挿入前からアニメーション終了まで付与されるクラス。トランジションの設定を書くために使用する。
v-leave 削除のアニメーションの開始前に付与され、アニメーション開始時に削除されるクラス。削除時のアニメーションの初期スタイルを適用するために使用する。
v-leave-to 削除のアニメーションの開始時に付与され、アニメーション終了後に削除されるクラス。削除時のアニメーションの終了時のスタイルをあてるために使用する。
v-leave-active 削除のアニメーション開始前から終了後まで付与されるクラス。トランジションの設定を書くために使用する。

トランジションフック

フック名 説明
before-enter 要素が挿入される前
enter 挿入されてアニメーションされる前
after-enter 挿入アニメーション後
enter-cancelled 挿入キャンセル時
before-leave 削除アニメーションが実行される前
leave 削除アニメーションが実行される前でbefore-leaveの後
after-leave 要素が削除された後
leave-cancelled 削除キャンセル時

Slot

slotとは親コンポーネント側から、子コンポーネントのテンプレートの一部を差し込む機能。

スロットを使う具体的な場面

  • ページ全体のレイアウトを表現するコンポーネントに、ページのヘッダー、ボディ、フッターを挿入
  • アクションシートのコンポーネントに対して、選択可能なアクションを挿入する
  • スライダーの各アイテムの内容を指定する

カスタムディレクティブ

  • カスタムディレクティブ

    DOM要素にアクセスする処理を共通化する。属性として指定する。

  • コンポーネント

    Vueインスタンスを再利用・管理しやすい単位で分割する。要素として指定する。

  • ミックスイン

    Vueインスタンス・コンポーネント間で共有できる機能を抜き出す。コンポーネントと違ってテンプレートを含まない。

単一ファイルコンポーネント

styleブロックにscope属性を付与することで、擬似的な名前空間（ファイルごとのスコープ）を設けて、干渉の危険を防ぐ。

Vuex

データフローの設計において頻出するパターン

  • 信頼できる唯一の情報源（Single Source of Truth）

    管理する対象のデータを一ヶ所に集約することで管理を容易にすることを目的とする設計パターン

    1. どのコンポーネントでも同一のデータを参照するため、データや表示の不整合が発生しづらい
    2. 複数のデータを組み合わせた処理を比較的容易に実装できる
    3. データの変更のログ出力、現在のデータの確認などの開発に便利なツールを作りやすい

  • 状態の取得更新のカプセル化

    状態管理のコストを下げることができる

    1. 状態の取得・更新のロジックを様々な場所から利用できる
    2. 詳細な実装をビューから隠すことで、データ構造や取得、更新処理の変更の影響範囲を小さくする
    3. デバッグ時に確認する場所が限られるため、デバッグが容易になる

  • 単方向データフロー

    状態の取得、更新のコードが簡潔になる。データが単方向でないと、データの取得と更新の両方を同時にできてしまい、より複雑な処理になり理解が難しくなる。

    1. データを取得しつつ更新するといったようなことができなくなり、実装やデバッグが単純になる
    2. データを取得、更新するために何をするのかの選択肢が絞られて、理解が容易なコードを書きやすい

State

ステートに適したデータ

  • サーバーからデータを取得中かどうかを表すフラグ
  • ログイン中のユーザーの情報など、アプリケーション全体で使用されるデータ
  • ECサイトにおける商品の情報など、アプリケーションの複数の場所で使用される可能性のあるデータ

コンポーネント側で持つべきデータ

  • マウスポインタがある要素の上に存在するかどうかを表すフラグ
  • ドラッグ中の要素の座標
  • 入力中のフォームの値

Getter

ステートから別の値を算出するために用いる。ゲッターを利用することでコンポーネント上で表示のためにステートを計算することが避けられ異なるコンポーネント間でロジックを再利用できるようになる。

Mutation

ステートを更新するために用いられる。Vuexでは規約としてミューテーション以外がステートの更新を行うことを禁止している。

ステートの更新をミューテーションのみが行えばステートの変更がいつどこで発生したか追跡しやすくなる。

ミューテーションないで行う処理は全て同期的にする必要がある。

Action

非同期処理や外部APIとの通信を行い、最終的にミューテーションを呼び出すために用いられる。

ハンドラーの第一引数にステートではなく、コンテキストと呼ばれる特別なオブジェクトが渡される。

  • state: 現在のステート
  • getters: 定義されているゲッター
  • dispatch: 他のアクションを実行するメソッド
  • commit: ミューテーションを実行するメソッド

Vue CLI

Vue CLIは、Vue.jsの開発環境構築などを行うための公式コマンドラインツール

$ vue init <template-name> [project-name]

サーバーサイドレンダリングの必要性

サーバーサイドレンダリングは、初回応答の高速化などの効果は見込めるが、アプリケーションの複雑化に繋がるため開発労力は上昇する。

サーバー側のCPU負荷が増大するため、トラフィックの多い場合はキャッシュ戦略によって対応するサーバー側の負荷を軽減させるなどの対応も必要となる。

必要がある場合　→

  • コンテンツのSEO／OGP対応
  • コンテンツの初期表示ロード時間短縮によるユーザー体験改善

Tags: Vue.js

BACK TO BLOG