どちらも要素を条件付きで表示しますが、やり方が異なります — v-if は要素をDOMから追加/削除します；v-show はDOMに要素を保持したままCSSの display を切り替えます。
<template>
<p v-if="isVisible">Rendered only when true (removed from DOM when false)</p>
<p v-show="isVisible">Always in the DOM; just display:none when false</p>
</template>
...
v-if は切り替えコストが高い（要素とそのコンポーネントを作成/破棄し、毎回ライフサイクルフックを実行）ですが、条件がfalseの場合はゼロコスト（何もレンダリングされない）です。v-show は初期コストが高い（隠れていても常にレンダリング）ですが、切り替えは安い（CSSの変更だけ）です。Toggles often (tabs, dropdowns) → v-show (cheap to flip)
Rarely changes / may never render → v-if (skip rendering entirely)
Expensive content rarely shown → v-if (don't pay to build it)
<template>
<p v-if="status === 'loading'">Loading...</p>
<p v-else-if="status === 'error'">Error!</p>
<p v-else>Done</p>
</template>
v-if は v-else-if/v-else チェーンをサポートします；v-show はサポートしません（1つの要素だけを切り替えます）。
v-show は <template> ラッパーで機能しません（ display を設定する要素がない）；v-if は機能します。
正しいものを選ぶことは、実際のパフォーマンスの決定です：頻繁に切り替えるもの（DOMが残り、切り替えが安い）には v-show を、条件付き/まれ、または高コストなもの（必要になるまでレンダリングしない）には v-if を使用します。
誤った選択 — 例えば、通常は非表示の重いコンテンツに v-show を使用する — は、レンダリング作業を無駄にします。