- v-if：它是一个真正意义上的条件渲染，当条件为 false 时，该元素不会被渲染到 DOM 中。它会根据条件动态地添加和删除元素，所以它是有渲染和卸载的过程的。
- v-show：它是一个简单的条件显示，当条件为 false 时，该元素会被添加一个 display: none 的 CSS 样式，从而隐藏该元素。它不会有渲染和卸载的过程，因此它的性能更好。
相同点：
都是动态展示隐藏组件
不同点：
- v-show隐藏是CSS的手段，给元素添加 display:none，dom元素依旧还在DOM树上。
v-if隐藏是将dom元素整个添加或删除，会从DOM树中移除。
-
v-show的切换开销小，但是会有初次渲染的开销，适用于频繁切换的场景。
-
v-if的切换开销大，如果初始条件是false，则不用初次渲染，不频繁切换甚至不会切换时，推荐使用v-if
-
v-if由false变为true的时候，会触发被卸载组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候会触发组件的beforeDestory、destoryed方法；v-show不会触发被隐藏组件的任何生命周期钩子。
-
一个坑和注意点(开发中遇到)：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 能够提高应用的性能。