在 Vue.js 中，v-if 和 v-show 是两个用于条件渲染的指令，但它们的工作方式有一些显著的区别：
-
渲染方式：
v-if：元素在条件为真时才会被渲染到 DOM 中。当条件为假时，元素及其子元素会被完全销毁，不会存在于 DOM 中。v-show：元素始终会被渲染到 DOM 中，只是通过 CSS 的display属性来控制其显示或隐藏。当条件为假时，元素会被隐藏（即display: none），但依然存在于 DOM 中。
-
性能：
v-if：由于元素及其子元素在条件为假时会被销毁，因此切换条件时会有更高的开销（涉及到 DOM 的添加和移除）。适用于在运行时频繁改变条件的场景。v-show：由于元素始终存在于 DOM 中，只是通过 CSS 控制显示，因此切换条件时开销较小，适用于频繁切换显示和隐藏的场景。
-
用法场景：
v-if：适用于条件改变不太频繁，或者在条件为假时不需要保留元素及其状态的场景。v-show：适用于需要频繁切换显示状态，并且希望保留元素及其状态的场景。
示例代码：
<template>
<div>
<!-- 使用 v-if -->
<div v-if="isVisible">This will only be in the DOM if isVisible is true</div>
<!-- 使用 v-show -->
<div v-show="isVisible">This will always be in the DOM but hidden if isVisible is false</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const isVisible = ref(true);
</script>
选择 v-if 还是 v-show 取决于具体的需求和性能考虑。如果需要频繁切换元素的显示状态，且不希望每次都进行 DOM 操作，v-show 是更好的选择。而如果条件变化不频繁，并且不需要保留元素状态，v-if 会更适合
