概要
Vue.jsやNuxt.jsで様々なディレクティブを使用する機会があると思います。
今回はその中でv-ifとv-showディレクティブについて学習したのでアウトプットします。
##ディレクティブとは
公式ドキュメントにディレクティブについて記載を一部抜粋します。
ディレクティブは v- から始まる特別な属性です。ディレクティブ属性値は、単一の JavaScript 式を期待します（・・・一部省略・・・）。ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を DOM に適用することです。
つまりJavaScriptの式を使って、DOMを操作することができるものです。
具体例
<p v-if='message'>hello world!</p>
上記はmessagesという式がtrueかfalseによって<p>hello world!</p>の表示の有無が決まります。
ディレクティブは他にもv-bindやv-onなどの種類があります。
詳しい使い方についてはVue.js公式ドキュメントを参照してください。
v-ifとv-showの違い
v-ifとv-showの両方とも与えられた式の条件に基づいてDOMを表示、非表示にする役割があります。
ただその表示、非表示にする方法が異なります。
####v-show
v-showは条件に関わらずレンダリングされます。
レンダリングされた後、条件がfalseの時displayプロパティがnoneになることで非表示になります。
よって初期レンダリングコストが高いです。
####v-if
一方v-ifは条件がtrueのときだけレンダリングされます。
つまりfalseの場合はレンダリングされません。
よって初期レンダリングコストはv-showに比べて低いです。
しかし、切り替えが頻繁に行われる場合は逆にコストが高くなります。
v-ifとv-showの使い分け
公式ドキュメントでは下記のように記載されてます。
一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期レンダリングコストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。
つまり使い分けの基準は下記になります。
・ v-ifは__頻繁に切り替えが必要ない__場合に使用
・ v-showは__頻繁に切り替えが必要__な場合に使用