v-if v-showの違いについて

Posted at 2024-07-04

はじめに

備忘録です。
Vueを書き始めて2ヶ月が経ったばかりの新米です。
　

v-showディレクティブとは何か

機能的にはv-ifディレクティブに似ています。
それぞれの使い方を見ていきます

 const flag = ref(false)

<p v-if="flag">show</p>
<button @click="flage = !flage">toggle</button>

 const flag = ref(false)

<p v-show="flag">show</p>
<button @click="flage = !flage">toggle</button>

これだけ見るとまるっきり一緒ですね。
では何が違うのかというと、要素の消し方が違います。

v-ifの場合: 条件式の値がfalsyの場合DOMにはというコメントアウトのみが表示され、DOM要素自体は取り除かれます
v-showの場合: 条件式の値がfalsyの場合styleにdisplay: none; が付与されますが、DOM要素自体は残り続けます

つまり以下の関係になります
v-ifは初期のレンダリングコストが低く、切り替えのコストが高い
v-showは初期のレンダリングコストが高く、切り替えのコストが低い

ディレクティブ	Falsy時	template内	else文	使いどき
v-if	DOMから消える	使える	ある	頻繁に要素のtrue/falseが切り替わらない時
v-show	DOMに残る	使えない	ない	頻繁に要素のtrue/falseが切り替わる時

個人的に今までv-showを使ったことがないので、使い所があったら使ってみたいです。