Cả hai đều hiển thị một phần tử có điều kiện, nhưng theo cách khác nhau — v-if thêm/xóa phần tử khỏi DOM; v-show giữ phần tử trong DOM và bật/tắt thuộc tính CSS display.
<template>
<p v-if="isVisible">Chỉ render khi true (bị xóa khỏi DOM khi false)</p>
<p v-show="isVisible">Luôn ở trong DOM; chỉ display:none khi false</p>
</template>
<!-- v-if="false" → phần tử hoàn toàn không tồn tại -->
<!-- (không có gì trong DOM) -->
<!-- v-show="false" → phần tử tồn tại nhưng bị ẩn -->
<p style="display: none">...</p>
v-if có chi phí bật/tắt cao hơn (nó tạo/hủy phần tử và các component của chúng, chạy lifecycle hook mỗi lần) nhưng không tốn chi phí khi điều kiện là false (không render gì).v-show có chi phí khởi tạo cao hơn (luôn render, dù bị ẩn) nhưng bật/tắt rẻ (chỉ thay đổi CSS).Bật/tắt thường xuyên (tab, dropdown) → v-show (lật rẻ)
Ít thay đổi / có thể không bao giờ render → v-if (bỏ qua render hoàn toàn)
Nội dung tốn kém hiếm khi hiển thị → v-if (đừng tốn công dựng nó)
<template>
<p v-if="status === 'loading'">Loading...</p>
<p v-else-if="status === 'error'">Error!</p>
<p v-else>Done</p>
</template>
v-if hỗ trợ chuỗi v-else-if/v-else; v-show thì không (nó chỉ bật/tắt một phần tử).
v-show không hoạt động trên wrapper <template> (không có phần tử để đặt display); v-if thì có.
Chọn đúng cái là một quyết định hiệu năng thực sự: v-show cho những thứ bật/tắt thường xuyên (DOM giữ nguyên, lật rẻ), v-if cho những thứ có điều kiện/hiếm hoặc tốn kém (đừng render cho đến khi cần).
Chọn sai — ví dụ v-show cho nội dung nặng thường bị ẩn — sẽ lãng phí công render.