Vue3 中 v-show 和 v-if 的区别：何时使用 v-show 实现倒计时？

在 Vue3 中，v-show 和 v-if 都可以用来控制元素的显示和隐藏，但它们的工作原理不同，适用于不同的场景。

v-show 通过 CSS 的 display 属性来控制元素的显示和隐藏，当条件为 false 时元素依然存在于 DOM 中，只是不可见。

v-if 通过 DOM 的插入和删除来控制元素的显示和隐藏，当条件为 false 时元素会被从 DOM 中删除。

因此，

v-show 适用于频繁切换显示和隐藏的元素，因为它不需要频繁操作 DOM，性能更佳。
v-if 适用于只在特定条件下显示或隐藏的元素，因为它可以彻底移除元素，减少 DOM 的复杂度。

倒计时应该使用 v-show， 因为倒计时元素需要频繁刷新，而且一直存在于页面中，只是需要不断更新显示的内容。使用 v-show 可以避免频繁的 DOM 操作，提高性能。

示例：

<template>
  <div v-show="showTimer">
    {{ timer }} 秒
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTimer: true,
      timer: 60
    }
  },
  mounted() {
    setInterval(() => {
      this.timer--;
      if (this.timer <= 0) {
        this.showTimer = false;
      }
    }, 1000);
  }
}
</script>

Vue3 中 v-show 和 v-if 的区别：何时使用 v-show 实现倒计时？