はじめに
v-ifとv-showの違いと使い分けについて学習したので、
その内容を自分の備忘録もかねて整理して記事にします。
v-ifとv-showについて
v-if,v-showについてそれぞれ簡単に説明します。
どちらも特定の要素を条件に応じて描画したい場合に使用され、
ディレクティブの式が真を返す場合のみに描画されます。
※ディレクティブ
Vue.jsでは、標準のHTMLに対して独自の属性を追加することで、
属性値の式に変化に応じてDOM操作を行います。
この特別な属性のことをディレクティブと呼び、
属性名にはデフォルトで「v-」という接頭辞がつきます。
v-ifとv-showの違い
さて、ここから本題です。
これらの違いは大きく分けて2つあります。
- v-ifは要素の描画コントロールをJavaScriptで行うが、 v-showはJavaScriptでなく、cssのdisplayプロパティで行う
- v-ifはv-elseやv-else-ifのような分岐処理を使用することができるが、 v-showはできない
v-ifとv-showの使い分け
では、前述の違いを踏まえてこれらをどう使い分けていくか。
違い②で説明したようにv-showは複数の分岐処理は使えないので、
そのような実装をしたい場合はv-if一択でしょう。
ここでは違い①に焦点を当てます。
要素の描画コントロールについて、
v-ifはJavaScriptで式の結果に応じてDOM要素を追加または削除するのに対して、
v-showはスタイルの操作、つまりdisplayプロパティの値を変更することで実現します。
一般的にスタイルの操作よりもDOM操作の方がレンダリングコストが高く、
この観点から「切り替えの頻度が高い場合」はv-showの使用が推奨されます。
参考資料
・Vue.js公式ドキュメント
https://jp.vuejs.org/v2/guide/conditional.html
・書籍「Vue.js入門 基礎から実践アプリケーション開発まで」
・書籍「たった1日で基本が身に付く！ Vue.js 超入門」