【超Vue.js】フィルターとミックスイン【セクション11 】

※ セクション8~10はわざわざ纏める必要あるか微妙だったので、一旦パス。

144. フィルターを使用して、一般的なテキストフォーマットを作成する

フィルター…テキストをフォーマットするためのもの。文字を全部大文字にするみたいな。

今まではcomputedでやっていた。
→computedだと、dataの各プロパティごとに、dataの各プロパティごとに大文字にする設定を記述必要がある。
→大文字にフォーマットするプロパティをdata毎に作ってあげる必要がある。

main.jsに書く

1引数にフィルター名
2引数に関数→関数に必ず引数を取る→引数がフォーマットしたい値→フォーマットした値をreturnする
dataのプロパティ名　パイプ記号　フィルター名

(main.js)
Vue.filter("uppercase", function(value) {
  return value.toUpperCase();
}

{{ data名 | uppercase }}

145. コンポーネントのオプション内でローカルフィルタを定義する

ローカル登録

filters: {

  フィルター名(value) {

         return  value.toLower

146. 複数のフィルタ関数を連結させる

フィルターの特徴

• フィルタを連結できる
  →パイプ記号で連結させる
  →左側のフィルターから実行される

147. フィルターでthisが使えないことに注意する

フィルター内ではthisは使えない

thisでアクセスしたいなら、computed、メソッドを使う。

148. computedとフィルターのキャッシュに対する違いを理解する

• computed...リアクティブな依存関係に基づいてキャッシュする
  →必要な時だけ変わる

• フィルタ...そのような機能はない。メソッドと同じで再描画される
  →頻繁に再描画される場合はフィルタを使うのを避けよう。

149. 共有できるコードを全てミックスインにする

ミックスインとは

export default, data, filters, directivesなどのoptionを、複数のコンポーネントで共有できる。コードの再利用。

150. 実際にミックスインを作って、オプションをコンポーネント間で共有する

共有化したいオプションを、オブジェクトとして別ファイル(js)に移し、そのファイルを使いたいコンポーネントファイルでimportする。
→mixinsは配列にして、importしたモノを指定する。

151. オプションが被ったときに、どのようにミックスインがマージされるのか

mixinファイルとコンポーネントファイルでオプション名が被った場合

→全てのオプションにおいてコンポーネントが優先される

※ created, mountedなどライフサイクルフックは別

→mixinのライフサイクルが先に実行される。その後にcomponentのふっくが実行される。

152. グローバルミックスインを作成する

グローバルミックスインのオプションは、全てのVueインスタンスに自動で適用されてしまう！
globalが最初に実行される。使う時は要注意。普通は使わない。