v-if 和 v-show 差異？

核心差異

	v-if	v-show
渲染方式	條件為 false 時，完全移除 DOM 元素	條件為 false 時，設定 display: none
初次渲染	惰性（false 時不渲染）	總是渲染
切換開銷	高（銷毀/重建 DOM 和組件）	低（只切換 CSS）
初始開銷	低（假時不渲染）	高（一定渲染）
支援 v-else	✅ 支援	❌ 不支援
<template> 包裹	✅ 支援	❌ 不支援

範例

<!-- v-if：DOM 完全移除/建立 -->
<div v-if="isLoggedIn">
  歡迎回來！
</div>
<div v-else>
  請先登入
</div>

<!-- v-show：DOM 存在，只切換 display -->
<div v-show="isLoading">
  載入中...
</div>

生命周期差異

<!-- v-if 為 false → 組件被銷毀，onUnmounted 被呼叫 -->
<!-- v-if 變 true → 組件重新建立，onMounted 被呼叫 -->
<MyComponent v-if="show" />

<!-- v-show 為 false → 組件不銷毀，生命周期不重新執行 -->
<MyComponent v-show="show" />

何時使用哪個？

情境	推薦
切換頻繁（如下拉選單、tooltip）	v-show
初始條件大多為 false	v-if
需要搭配 v-else	v-if
包含複雜子組件（切換時不想重建）	v-show
有資安考量（false 時不應存在 DOM）	v-if