v-show 与 v-if 有什么区别?

zhezhongyun 2025-05-26 20:19 43 浏览

当谈到 v-show 和 v-if 的区别时，以下是一些具体的例子说明：

一：初始渲染消耗：

假设有一个初始条件为假的情况：

<div>
  <div v-show="false">v-show示例</div>
  <div v-if="false">v-if示例</div>
</div>

v-show：元素会被渲染并隐藏，所以在初始渲染时，该元素会在 DOM 中存在，但不可见。
v-if：由于条件为假，该元素在初始渲染时不会被创建，所以在 DOM 中也不存在。

考虑一个需要频繁切换可见性的情况：

<div>
  <div v-show="show">v-show示例</div>
  <div v-if="show">v-if示例</div>
</div>

data() {
  return {
    show: true
  };
},
methods: {
  toggleVisibility() {
    this.show = !this.show;
  }
}

v-show：通过修改 CSS 的 display 属性来切换元素的可见性，开销较小。
v-if：在切换元素可见性时，需要动态地创建或销毁元素，开销较大。

考虑一个条件依赖于响应式数据的情况：

<div>
  <div v-show="count > 0">v-show示例</div>
  <div v-if="count > 0">v-if示例</div>
</div>

data() {
  return {
    count: 0
  };
}

v-show：不会触发额外的响应式侦听，因为元素始终存在于 DOM 中。
v-if：当 count 的值发生变化时，会触发相应的创建或销毁元素的操作，涉及到响应式侦听。

是指 v-show 和 v-if 在元素渲染时的行为不同。
以下是一个例子来说明这个区别：

<div>
  <button @click="toggleVisibility">切换元素</button>
  <div v-show="show">v-show 示例</div>
  <div v-if="show">v-if 示例</div>
</div>

data() {
  return {
    show: true
  };
},
methods: {
  toggleVisibility() {
    this.show = !this.show;
  }
}

在这个例子中，有一个按钮和两个 <div> 元素，一个使用 v-show，另一个使用 v-if。

初始时，show 的值为 true，所以两个 <div> 都会被渲染。

当点击 "切换元素" 按钮时，切换 show 的值。观察到的行为如下：

对于 v-show：无论 show 的值是 true 还是 false，元素始终存在于 DOM 中，只是通过修改 CSS 的 display 属性来控制其可见性。

对于 v-if：当 show 的值从 true 切换到 false 时，与 v-if 相关的元素将从 DOM 中移除，因此在页面上不再显示。当 show 的值从 false 切换到 true 时，与 v-if 相关的元素将重新创建并渲染到 DOM 中。

这个例子展示了 v-show 和 v-if 在编译时机上的区别。v-show 会始终保留元素并使用 CSS 控制可见性，而 v-if 根据条件动态地创建或销毁元素。