一文讲透 Vue 中 `v-if` 和 `v-show` 的区别

1. 前言

在Vue.js中，v-if和v-show都是用于控制元素显示与隐藏的指令。尽管它们的目的相同，但在实现机制和适用场景上有显著的区别。本文将详细介绍v-if和v-show的区别，帮助开发者在实际开发中选择合适的指令。

2. 基本概念

2.1 v-if

v-if是一个条件渲染指令，用于根据表达式的值决定是否在DOM中插入元素。只有当表达式的值为true时，元素才会被渲染，否则元素将从DOM中移除。

<div v-if="isVisible">这是一条信息</div>

2.2 v-show

v-show也是一个条件渲染指令，但与v-if不同，v-show不会移除元素，而是通过设置CSS属性display的值来控制元素的显示与隐藏。

<div v-show="isVisible">这是一条信息</div>

3. 主要区别

3.1 渲染机制

v-if：当条件为false时，元素完全从DOM中移除；当条件为true时，元素重新插入DOM中。这意味着在条件切换时，元素会进行销毁和重建。
v-show：无论条件如何变化，元素始终存在于DOM中，只是通过CSS的display属性来控制显示（display: block）或隐藏（display: none）。

3.2 性能

v-if：在条件首次为true时会有更高的初始渲染成本，因为需要创建DOM元素。当条件频繁切换时，反复的DOM销毁和重建会带来较高的性能消耗。
v-show：初始渲染成本较低，因为元素始终存在于DOM中，仅通过CSS属性控制显示和隐藏。在条件频繁切换时性能更好，因为不涉及DOM元素的创建和销毁。

3.3 适用场景

v-if：适用于条件很少变化，或者初次渲染不需要的情况。例如，根据权限动态加载组件。
v-show：适用于需要频繁切换显示和隐藏的情况，例如，标签页的切换。

4. 使用示例

4.1 v-if 示例

<div id="app">
  <button @click="toggle">切换显示</button>
  <p v-if="isVisible">这是一个用 v-if 显示的元素</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: false
    },
    methods: {
      toggle() {
        this.isVisible = !this.isVisible;
      }
    }
  });
</script>

在这个例子中，每次点击按钮时，元素会在DOM中插入或移除。

4.2 v-show 示例

<div id="app">
  <button @click="toggle">切换显示</button>
  <p v-show="isVisible">这是一个用 v-show 显示的元素</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: false
    },
    methods: {
      toggle() {
        this.isVisible = !this.isVisible;
      }
    }
  });
</script>

在这个例子中，每次点击按钮时，元素的display属性会在block和none之间切换，但元素始终存在于DOM中。

5. 总结

v-if和v-show都是Vue.js中用于控制元素显示与隐藏的指令，但它们在实现机制和适用场景上有显著区别。v-if通过条件判断决定是否在DOM中插入或移除元素，适用于条件很少变化的情况；而v-show通过CSS属性控制元素的显示与隐藏，适用于需要频繁切换显示状态的情况。理解这两者的区别，能够帮助开发者在实际项目中更好地优化性能和用户体验。

6. 相关阅读

Vue.js 官方文档 - 条件渲染
Vue.js 官方文档 - API参考
Vue.js 官方文档 - API参考