Vue 的 v-show 和 v-if 区别?
一、区别
v-show 和 v-if 是 Vue.js 中两种常用的指令，都可以用于控制元素的显示和隐藏，但它们有本质上的区别:
1)v-show 是通过控制元素的 Css display属性来显示或隐藏元素。无论条件是否为真，元素都会被渲染到 DOM中，只是通过设置 CSS 样式来控制它的可见性。
2)v-if 则是通过条件判断来决定是否渲染元素。如果条件为假，元素根本不会被渲染到 DOM 中。
二、使用场景
1、v-show 适合用于需要频繁切换显示/隐藏状态的场景。因为它只是在现有的 DOM 元素上进行 CSS 切换，性能开销较小。
2、v-if适合用于在条件变化不太频繁的情况下使用，因为它每次重新渲染时都会进行完整的 DOM 操作，性能开销较大。
1)性能:
v-show 带来的性能开销主要体现在第一次渲染时。因为即便元素隐藏了，它还是会占据 DOM 的空间和资源,但是，后续的切换开销极小。
v-if每次状态切换都伴随着元素的创建和销毁，当条件频繁变化时，这样的操作会带来一定的性能开销。因此在频繁切换时，不推荐使用 v-if。
2)初始渲染:
v-show 在初次渲染时无论条件是否满足都会将元素生成到 DOM 中，然后根据条件通过修改 display 属性来决定显示/隐藏。
v-if 在初次渲染时会根据条件决定是否创建元素，条件为假时，元素不会生成到 DOM 中。