v-showとv-ifのちがいについて

Vue.jsでマルチステップの申し込みフォームを作成しています。
その中でv-showとv-ifのどちらを使用するか迷ったので、どんなちがいがあるのか調べてみました。

ってことで、この記事はv-showとv-ifの使い分けについて知りたい方向けです。

v-ifとv-showの使い分け

まずは結論、表示/非常時の頻度で使い分けます。
v-ifは単発の切り替えがメインの時に、
v-showは表示／非表示の切り替えが多い時に使います。

理由はこういった使い分けをした方がブラウザの負担が軽くなるからです。なぜならv-ifはそのタブごと削除、表示を行います。一方v-showはスタイル属性をdisplay:noneにすることで非表示にしています。

つまり、タブを消去/作成するv-ifは頻繁に切り替えをするのであれば、その度にタブを消去したり作成したりするので重いです。
ただ、その分メリットもあって、非表示の状態であれば全体としての読み込みがv-showよりも早く、更にはv-else-ifだったりv-elseといった条件付けもできるので便利です。

対してv-showは必ずタブを作成するので初期描画の速度においてv-ifよりも遅くなります。その分、CSSのstyle属性で切り替えを行っているので、頻繁な切り替えをする際にはv-ifよりも早さがあります。

<template>においてv-showは使えない

複数のタブをまとめてグループにすることができる<template>ですが、検証ツール使って見てみると<template>という要素は見つかりません。何かと便利な<template>ですがCSSのstyle属性を変更することで表示を切り替えるv-showを使うことができません。

まとめ

・v-ifとv-showの使い分けは切り替え頻度
・単発な切り替えならv-if
・頻繁な切り替えならv-show
・理由は切り替えの方法にあり

参考

条件付きレンダリング