Vue 条件渲染技巧：v-if、v-show 与 v-else 的实战选择

快速概述

Vue 条件渲染是控制界面元素显示与隐藏的核心技术，主要解决“何时渲染、如何渲染”的问题。v-if、v-show 与 v-else 各自适用于不同场景：v-if 适合低频切换且初始条件为假的情况，v-show 适合高频切换，v-else 则与 v-if 配合实现互斥逻辑。前置环境要求：Vue 3.x 或 Vue 2.6+，无需额外安装依赖。

核心概念与原理

v-if 是“真正的”条件渲染，当条件为假时，元素及其子组件会被完全销毁并从 DOM 中移除；条件为真时再重新创建。这意味着 v-if 有更高的切换开销，但初始渲染时若条件为假，则不会占用任何资源。v-show 则始终渲染元素，仅通过 CSS 的 display 属性控制可见性，因此切换开销极小，但初始渲染时无论条件真假都会创建 DOM 节点。v-else 必须紧跟在 v-if 或 v-else-if 之后，用于定义条件不满足时的备选分支，三者共同构成完整的条件渲染逻辑。

实战步骤与代码

步骤 1：基础条件渲染

<template>
  <div>
    <p v-if="isLoggedIn">欢迎回来，用户！</p>
    <p v-else>请先登录</p>
  </div>
</template>
<script setup> import { ref } from 'vue'; const isLoggedIn = ref(false); // 控制登录状态 </script>

步骤 2：v-show 高频切换场景

<template>
  <button @click="togglePanel">切换面板</button>
  <div v-show="isPanelVisible" class="panel">
    这是高频切换的面板内容
  </div>
</template>
<script setup> import { ref } from 'vue'; const isPanelVisible = ref(true); const togglePanel = () => { isPanelVisible.value = !isPanelVisible.value; }; </script>

步骤 3：v-else-if 多分支逻辑

<template>
  <div>
    <p v-if="status === 'loading'">加载中...</p>
    <p v-else-if="status === 'success'">加载成功！</p>
    <p v-else-if="status === 'error'">加载失败，请重试</p>
    <p v-else>未知状态</p>
  </div>
</template>
<script setup> import { ref } from 'vue'; const status = ref('loading'); // 可选值: loading / success / error </script>

常见坑点与优化

• v-if 与 v-for 同时使用：Vue 3 中 v-if 优先级高于 v-for，可能导致预期外的行为。建议将 v-if 放在父级元素上，或使用计算属性过滤列表。
• v-else 未紧邻：v-else 必须紧跟 v-if 或 v-else-if 之后，中间不能插入其他元素，否则会报错或失效。
• 初始渲染性能：若初始条件为假且切换频率低，优先使用 v-if 减少 DOM 节点；若切换频繁，v-show 更优。
• 组件生命周期：v-if 切换会触发组件的创建与销毁钩子，v-show 则不会。若组件初始化开销大，避免使用 v-if 频繁切换。
• CSS 影响：v-show 通过 display: none 隐藏，若元素自身设置了 display 属性，需注意样式覆盖问题。

性能优化建议：对于大型列表，结合计算属性预先过滤数据；对于频繁切换的轻量元素，使用 v-show；对于需要懒加载的组件，使用 v-if 配合异步组件。