Vue 算出プロパティとトランジション編 ~自由なデザインを!~
算出プロパティ
算出プロパティとは処理を含めることができるデータのこと。
ゲッター(取得) セッター(代入)
算出プロパティへの代入を行う場合エラーになる。
しかし、getで値を取得し、setでプロパティに代入することで対応できる。
キャッシュ機能
算出プロパティとメソッドの違いは、
算出プロパティは結果をキャッシュするため、トリガがリアクティブなデータのみ(元のデータ)になる。
なので、元のデータが変わらない限り結果に変更はない。
算出プロパティの色々
ウォッチャ (watch)
データや算出プロパティに変化が起こった場合に処理を実行する。
ただウォッチャ自体がデータを返すことはない。
フィルタ(|パイプ)
テキストベースの変換処理を実行する機能。
(文字や数字などの)
ただthisへのアクセスはできない。
カスタムディレクティブ
ディレクティブの自作を行う。(v-○○)
ただ描画の最適化はされない。
データバインディングだけでできない場合のみ使用。
nextTick
nextTickはDOMの更新後にアクセスするために更新を待つ機能。
グローバルメソッドのVue.nextTick
か
インスタンスメソッドthis.$nextTick
(thisが使える)をコールバック関数として定義する。
ただウェブフォントや画像が含まれたら更新は待たない。
トランジション
基本
VueがCSSトランジション/アニメーション(フェードイン、フェードアウトなど)
のためのクラスを付与して使いやすくした機能。
トランジションの色々
単一要素トランジション
条件による描画状態の切り替えや
動的コンポーネントなどの場合に使用する。
Enterは対象要素がDOMに追加されたとき(表示)
Leaveは対象要素がDOMから削除されたとき(非表示)
リストトランジション
<transition-group>
を使用して複数の要素をグループ化して移動のアニメーションを行う。(追加、削除含む)
ユニークキーの指定が必要。
SVGのトランジション
SVGの要素やSVG自体もコンポーネント化可能。
トランジションフック
JavaScriptを用いたトランジション操作を可能にする。