v-if vs v-show：条件渲染的性能权衡

<div v-if="isShow">Hello</div>

isShow ? h('div', 'Hello') : null

<div v-show="isShow">Hello</div>

h('div', { style: { display: isShow ? '' : 'none' } }, 'Hello')

<script setup>
import { ref } from 'vue'

const isShow = ref(true)

// 频繁切换
setInterval(() => {
  isShow.value = !isShow.value
}, 100)
</script>

<template>
  <!-- v-if: 每次切换都重新渲染,卡顿 -->
  <HeavyComponent v-if="isShow" />

  <!-- v-show: 切换流畅 -->
  <HeavyComponent v-show="isShow" />
</template>

条件在运行时很少改变?
  ✅ v-if

需要频繁切换显示/隐藏?
  ✅ v-show

初始条件为 false 且后续可能不需要?
  ✅ v-if

元素很复杂,切换时不想重新渲染?
  ✅ v-show

需要配合 v-else/v-else-if?
  ✅ v-if (v-show 不支持)

需要配合 <transition>?
  两者都支持,但逻辑不同

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>Other</div>

<template>
  <input v-if="loginType === 'username'" key="username" placeholder="用户名" />
  <input v-else key="email" placeholder="邮箱" />
</template>

<script setup>
const tabs = ref(['home', 'profile', 'settings'])
const activeTab = ref('home')
</script>

<template>
  <div v-if="activeTab === 'home'">首页内容</div>
  <div v-if="activeTab === 'profile'">个人资料</div>
  <div v-if="activeTab === 'settings'">设置</div>
</template>

<keep-alive>
  <component :is="activeComponent" />
</keep-alive>

<!-- ❌ 不生效 -->
<template v-show="isShow">
  <div>A</div>
  <div>B</div>
</template>

<!-- ✅ 必须用真实元素 -->
<div v-show="isShow">
  <div>A</div>
  <div>B</div>
</div>

<!-- ❌ 不生效 -->
<div v-show="isShow">A</div>
<div v-else>B</div>

<!-- ✅ 必须两个都用 v-show -->
<div v-show="isShow">A</div>
<div v-show="!isShow">B</div>

<HeavyComponent v-show="false" />
<!-- 组件会被创建和挂载,只是 display: none -->

<transition name="fade">
  <div v-if="isShow">Hello</div>
</transition>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

<transition name="fade">
  <div v-show="isShow">Hello</div>
</transition>

<div :class="{ 'fade-in': isShow, 'fade-out': !isShow }" v-show="isShow">
  Hello
</div>

<div v-if="isShow">
  <span>静态文本</span>
  <span>{{ dynamic }}</span>
</div>

const _hoisted_1 = /*#__PURE__*/ _createElementVNode('span', null, '静态文本', -1)

function render() {
  return isShow
    ? _createElementBlock('div', null, [
        _hoisted_1, // 静态节点提升,不重新创建
        _createElementVNode('span', null, _toDisplayString(dynamic), 1),
      ])
    : _createCommentVNode('v-if', true)
}

<!-- ❌ Vue 2:v-for 优先级高,性能差 -->
<div v-for="item in list" v-if="item.active">{{ item.name }}</div>

<!-- ❌ Vue 3:v-if 优先级高,访问不到 item -->
<div v-for="item in list" v-if="item.active">{{ item.name }}</div>

<!-- ✅ 正确:先用 computed 过滤 -->
<script setup>
const activeList = computed(() => list.value.filter((item) => item.active))
</script>

<div v-for="item in activeList">{{ item.name }}</div>

<Child v-show="false" />
<!-- Child 的 mounted 仍会执行! -->

<input v-if="type === 'text'" type="text" />
<input v-else type="password" />
<!-- 切换时,input 会被复用,输入内容不清空 -->

<!-- 解决:加 key -->
<input v-if="type === 'text'" type="text" key="text" />
<input v-else type="password" key="password" />