Vue 算出プロパティとトランジション編 ~自由なデザインを!~

算出プロパティ

算出プロパティとは処理を含めることができるデータのこと。

ゲッター(取得) セッター(代入)
算出プロパティへの代入を行う場合エラーになる。
しかし、getで値を取得し、setでプロパティに代入することで対応できる。

キャッシュ機能
算出プロパティとメソッドの違いは、 算出プロパティは結果をキャッシュするため、トリガがリアクティブなデータのみ(元のデータ)になる。
なので、元のデータが変わらない限り結果に変更はない。

算出プロパティの色々

ウォッチャ (watch)
データや算出プロパティに変化が起こった場合に処理を実行する。
ただウォッチャ自体がデータを返すことはない。

フィルタ(|パイプ)
テキストベースの変換処理を実行する機能。
(文字や数字などの) ただthisへのアクセスはできない。

カスタムディレクティブ
ディレクティブの自作を行う。(v-○○)
ただ描画の最適化はされない。
データバインディングだけでできない場合のみ使用。

nextTick
nextTickはDOMの更新後にアクセスするために更新を待つ機能。
グローバルメソッドのVue.nextTickインスタンスメソッドthis.$nextTick(thisが使える)をコールバック関数として定義する。
ただウェブフォントや画像が含まれたら更新は待たない。

トランジション

基本
VueがCSSトランジション/アニメーション(フェードイン、フェードアウトなど) のためのクラスを付与して使いやすくした機能。

トランジションの色々

単一要素トランジション
タグ内に1つ存在する要素に対して
条件による描画状態の切り替えや 動的コンポーネントなどの場合に使用する。
Enterは対象要素がDOMに追加されたとき(表示)
Leaveは対象要素がDOMから削除されたとき(非表示)

リストトランジション
<transition-group>を使用して複数の要素をグループ化して移動のアニメーションを行う。(追加、削除含む) ユニークキーの指定が必要。

SVGトランジション
SVGの要素やSVG自体もコンポーネント化可能。

トランジションフック
JavaScriptを用いたトランジション操作を可能にする。