Vue 中 v-if 和 v-show 的区别

核心区别

1. 渲染机制不同

• v-if：真正的条件渲染，当条件为 false 时，对应的元素/组件会完全从 DOM 中移除

• v-show：无论条件如何，元素/组件始终会被渲染并保留在 DOM 中，只是通过 CSS 的 display: none 来控制显示/隐藏

2. 初始加载行为

• v-if：是"惰性"的，初始条件为 false 时不会渲染，只有条件第一次变为 true 时才会开始渲染

• v-show：无论初始条件如何，元素/组件总是会被渲染，初始条件只影响 CSS 的 display 属性

3. 切换开销

• v-if：切换时有较高的性能开销，因为会触发组件的销毁/重建过程

• v-show：切换时性能开销较低，只是简单的 CSS 属性切换

4. 编译过程

• v-if：是真正的条件渲染，会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建

• v-show：元素始终会被编译并保留，只是简单地基于 CSS 进行切换

使用场景建议

使用 v-if 的情况

• 当条件很少改变时（如根据用户权限显示/隐藏某些功能模块）

• 需要完全销毁和重建组件时（如切换不同类型的表单）

• 初始条件为 false 时不需要渲染的内容（优化初始加载性能）

使用 v-show 的情况

• 需要非常频繁切换显示/隐藏状态时（如标签页切换）

• 需要保留组件状态时（如表单输入内容）

• 简单的 UI 元素显示/隐藏控制

关于输入框值的保留

• v-show：当隐藏时，输入框的值会被保留，因为 DOM 元素仍然存在

• v-if：当条件为 false 时，输入框会被销毁，再次显示时会创建新的输入框，之前输入的值会丢失

示例代码

<template>
  <div>
    <button @click="toggle">切换显示</button>
    
    <!-- v-show 示例 -->
    <div>
      <h3>v-show 示例</h3>
      <input v-show="isVisible" v-model="showValue" placeholder="v-show输入框">
      <p>当前值: {{ showValue }}</p>
    </div>
    
    <!-- v-if 示例 -->
    <div>
      <h3>v-if 示例</h3>
      <input v-if="isVisible" v-model="ifValue" placeholder="v-if输入框">
      <p>当前值: {{ ifValue }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
      showValue: '',
      ifValue: ''
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

性能考虑

• v-if 有更高的切换开销，但初始渲染可能更快（当初始为 false 时）

• v-show 有更高的初始渲染开销（总是会渲染），但切换性能更好

总结选择