v-if和v-show的区别

v-if 和 v-show 都是 Vue 中用来进行条件渲染的指令，但它们之间有一些重要的区别：

1. v-if：是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。简单来说，如果条件为假，v-if 指令会完全销毁元素。

2. v-show：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。v-show 只会在元素上切换 CSS 的 display 属性。如果条件为假，v-show 指令只会将元素隐藏，而不是销毁。

总的来说，v-if 有更高的切换消耗，v-show 有更高的初始渲染消耗。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。