条件渲染：v-if 与 v-show

在 Vue.js 中，v-if 和 v-show 都是用于控制元素显示与隐藏的指令，但它们的工作原理和适用场景有所不同。

v-if 指令

v-if 指令用于根据表达式的真假值来决定是否渲染元素。当表达式为真时，元素会被渲染；当表达式为假时，元素会被完全移除 DOM 树。

示例：

<template>
  <div>
    <h1 v-if="showTitle">Vue is awesome!</h1>
    <button @click="showTitle = !showTitle">Toggle Title</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showTitle = ref(true);
</script>

在这个例子中，当 showTitle 为 true 时，标题 "Vue is awesome!" 会被渲染出来。当 showTitle 为 false 时，标题会被完全移除 DOM 树。

v-else 指令

v-else 指令用于与 v-if 配合使用，当 v-if 的条件表达式为假时，v-else 所关联的元素会被渲染。

示例：

<template>
  <div>
    <h1 v-if="showTitle">Vue is awesome!</h1>
    <h1 v-else>Vue is not awesome </h1>
    <button @click="showTitle = !showTitle">Toggle Title</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showTitle = ref(true);
</script>

在这个例子中，当 showTitle 为 true 时，标题 "Vue is awesome!" 会被渲染出来。当 showTitle 为 false 时，标题 "Vue is not awesome " 会被渲染出来。

v-if 的特点：

• 真正的条件渲染： v-if 会完全移除和重建 DOM 元素，包括事件监听器和子组件。
• 惰性渲染： 如果条件初始值为 false，v-if 不会进行任何渲染，直到条件变为 true 时才会渲染。
• 高切换开销： 由于每次切换都会重建 DOM 元素，v-if 的切换开销较高。

v-show 指令

v-show 指令也用于根据表达式的真假值来控制元素的显示与隐藏，但它不会移除 DOM 元素，而是通过改变元素的 display 属性来实现。当表达式为真时，元素的 display 属性设置为 block，元素可见；当表达式为假时，元素的 display 属性设置为 none，元素不可见。

示例：

<template>
  <div>
    <h1 v-show="showTitle">Vue is awesome!</h1>
    <button @click="showTitle = !showTitle">Toggle Title</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showTitle = ref(true);
</script>

在这个例子中，当 showTitle 为 true 时，标题 "Vue is awesome!" 会显示出来。当 showTitle 为 false 时，标题会隐藏，但仍然保留在 DOM 树中。

v-show 的特点：

• 保留 DOM 元素： v-show 不会移除 DOM 元素，而是通过改变 display 属性来控制可见性。
• 初始渲染开销高： 即使条件初始值为 false，v-show 也会渲染元素，只是将其隐藏。
• 低切换开销： 由于 v-show 只改变 display 属性，它的切换开销较低。

v-if 与 v-show 的选择

在选择 v-if 或 v-show 时，需要根据实际情况进行权衡：

• 如果条件经常改变，或者需要频繁切换，应该使用 v-show，因为 v-show 只会改变元素的 display 属性，不会重建 DOM 元素，因此切换开销更低。
• v-if 更适合于条件很少改变的情况，或者需要根据条件来决定是否渲染子组件，因为它会完全移除和重建 DOM 元素，在条件经常改变的情况下会造成性能损耗。