Vue.jsのv-ifとv-showの違い

Vue.jsでフロントエンドの描画を条件分岐する方法として
v-ifとv-showがあります。

v-if

v-if="条件"と書くことで条件の真偽によりその要素を表示するかしないかをコントロールできます。

v-if-example1.html

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no!</h1>

v-ifはディレクティブですので、複数の要素の表示/非表示をまとめてコントロールする際は以下のように
v-ifを<template>タグに記述します。

v-if-example2.html

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

条件が真のときに<template>要素全体が表示され、偽のときには<template>要素全体が非表示になります。

v-show

v-ifと同様にしてv-show="条件"と書くことで条件の真偽によりその要素を表示するかしないかをコントロールできます。
v-ifとの違いは、要素が常にDOMに保持されるということです。
つまり、v-showは要素の表示と非表示の切り替えをCSSの書き換えによって実現します。

v-show-example1.html

<h1 v-show="awesome">Vue is awesome!</h1>
<h1 v-show="not awesome">Oh no!</h1>

以上の要素がブラウザ上で描画されるときには

v-show-example2.html

<h1>Hello!</h1>
<h1 style="display: none;">Oh no!</h1>

となり、結果的にはHello!だけが表示されます。

どちらを使うべきか

v-ifは初期表示のコストが低い代わりに、SPA上で表示切り替えを行うためのコストが高いです。
そして、v-showは初期表示のコストが高い代わりに、表示切り替えをCSSで行うため、表示の切り替えに要するコストが低いと言えます。
つまり、
切り替えの頻度が低ければv-if
切り替えの頻度が高ければv-show
という使い分けをすれば良さそうです。

一部のブラウザではv-showは使えない

SafariとIEは、仕様でdisplay:noneのようなdisplayプロパティを適用できません。
従ってv-showでは要素の表示と非表示がコントロールできないので、v-ifを代わりに使用する必要があります。

追記

こちらの対処法について書かれているサイトがありましたので以下に記載します。
https://www.nedia.ne.jp/blog/2020/02/11/16033

参考