vue.js中的渲染【条件渲染】

条件渲染

在 Vue 中，条件渲染用于根据表达式的值来决定是否在 DOM 中渲染某个元素。Vue 提供了几种方式来实现条件渲染：

v-if 指令

用于根据条件是否为真来销毁或创建元素。

<p v-if="isVisible">显示这段内容p>

data() {
  return {
    isVisible: true
  }
}

结合 v-else-if 和 v-else

<p v-if="type === 'A'">A 类型p>
<p v-else-if="type === 'B'">B 类型p>
<p v-else>其他类型p>

v-show 指令

v-show 也是用来条件渲染的，但它不会移除 DOM 元素，只是通过 display: none 来控制显示。

这个内容始终存在于 DOM 中

要深入理解 Vue 的条件渲染，我们可以从以下几个方面逐层分析：指令机制、渲染行为、生命周期、性能考量，以及源码底层逻辑（简要）。

v-if 的本质 —— 控制元素的创建和销毁

v-if 是 Vue 提供的结构性指令，表示：只有当条件为真时，相关的元素/组件才会被插入到 DOM 中；条件为假时，会完全销毁对应的元素/组件。

示例：

<template>
  <div>
    <child-component v-if="showChild" />
    <button @click="showChild = !showChild">切换button>
  div>
template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      showChild: true
    }
  }
}
script>

当 showChild 为 false，Vue 会销毁子组件实例（触发 beforeUnmount → unmounted 生命周期钩子）；为 true 时，再重新创建组件实例。

v-show 的本质 —— 控制元素的CSS 显隐

v-show 仅仅是将 display: none 应用于元素，它的元素在初始化时就已经渲染，并始终存在于 DOM 中，只是控制样式隐藏。

本质代码：

el.style.display = value ? '' : 'none'

不会触发组件的卸载，也不走生命周期钩子。

性能对比分析

项目	v-if	v-show
初次渲染性能	慢（需要判断 + 渲染/销毁 DOM）	快（一次性渲染，无条件判断）
	切换时性能	慢（频繁销毁/创建）
DOM 占用	少（不渲染不占 DOM）	多（永远在 DOM）
生命周期触发	是（组件可反复进入离开生命周期）	否（只初始化一次）

实际建议：

• 使用 v-if：页面中条件变化不频繁，或者初次不需要显示的内容，例如模态框、登录状态变化。
• 使用 v-show：内容显示频繁切换，比如选项卡组件、频繁展示/隐藏的 UI。

template + v-if 的高级用法

template 本身不会被渲染到 DOM，但你可以使用它包裹多个子元素一起受 v-if 控制。

<template v-if="user">
  <p>用户名：{{ user.name }}p>
  <p>邮箱：{{ user.email }}p>
template>

避免了多元素 v-if 的语法错误（Vue 只能对一个元素使用指令）。

渲染流程和源码底层（简要）

• Vue 会在模板编译阶段将 v-if、v-else-if、v-else 处理为一个「条件表达式链」。
• 在运行时，会为 v-if 创建一个 Fragment Block，并根据布尔条件判断是否创建子组件或 DOM 节点。
• 对于组件，v-if 会动态地创建/销毁组件实例。
• v-show 直接在指令解析器中操作 DOM 样式，不影响虚拟 DOM diff 逻辑。

注意事项和陷阱

不要同时使用 v-if 和 v-for 在同一元素上：

• Vue 会优先处理 v-for，可能导致难以预期的行为。
• 解决方案：用 template v-for 外包一层，再在内部用 v-if。

<template v-for="item in list">
  <div v-if="item.visible">{{ item.name }}div>
template>

组件的缓存：使用 保留状态

• v-if 销毁组件会清空所有状态
• 配合 可以缓存被移除的组件：

<keep-alive>
  <my-tab v-if="showTab" />
keep-alive>