v-show/v-if 使用场景和区别

1. v-if：它是一个真正意义上的条件渲染，当条件为 false 时，该元素不会被渲染到 DOM 中。它会根据条件动态地添加和删除元素，所以它是有渲染和卸载的过程的。
2. v-show：它是一个简单的条件显示，当条件为 false 时，该元素会被添加一个 display: none 的 CSS 样式，从而隐藏该元素。它不会有渲染和卸载的过程，因此它的性能更好。

相同点：

​ 都是动态展示隐藏组件

不同点：

1. v-show隐藏是CSS的手段，给元素添加 display:none，dom元素依旧还在DOM树上。

​ v-if隐藏是将dom元素整个添加或删除，会从DOM树中移除。

2. v-show的切换开销小，但是会有初次渲染的开销，适用于频繁切换的场景。

3. v-if的切换开销大，如果初始条件是false，则不用初次渲染，不频繁切换甚至不会切换时，推荐使用v-if

4. v-if由false变为true的时候，会触发被卸载组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候会触发组件的beforeDestory、destoryed方法；v-show不会触发被隐藏组件的任何生命周期钩子。

5. 一个坑和注意点(开发中遇到)：v-show用在template上无效的，v-if有效。

举例子：

例如，当我们需要在用户点击按钮时显示一个模态框

<template>
  <div>
    <button @click="showModal = true">Show Modal </button>
    <div v-if="showModal" class="modal">
      Modal Content
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

在这个例子中，当 showModal 为 true 时，模态框就会被渲染，否则不会被渲染。因为模态框在不显示时不会被渲染，所以使用 v-if 能够提高应用的性能。