Vue 中说一下 v-if 和 v-show 的区别？

v-if 和 v-show 是 Vue 中用于条件性地显示元素的指令，它们有一些区别：

v-if：

• 惰性渲染： v-if 是惰性的，即如果条件为假，则元素及其子组件不会被渲染到 DOM 中。当条件变为真时，才会渲染并挂载元素及其子组件。
• 性能消耗： 当条件频繁切换时，v-if 可能有较高的性能消耗，因为它会频繁地销毁和重新创建元素及其子组件。

v-show：

• 显示/隐藏： v-show 也用于根据条件显示或隐藏元素，但是不同于 v-if，它通过 CSS 的 display 属性来控制元素的显示和隐藏。如果条件为假，元素仍然在 DOM 中，只是通过 CSS 的 display: none; 来隐藏。
• 性能消耗： 相比 v-if，v-show 的性能消耗较小，因为元素始终在 DOM 中，只是样式的显示与隐藏。

如何选择：

• 如果需要频繁切换条件并且元素的数量较少，可以使用 v-show，因为它的性能消耗较小。
• 如果条件不经常改变或者元素数量较大，可以考虑使用 v-if，因为它在条件不满足时可以避免对 DOM 的渲染。

选择 v-if 还是 v-show 取决于具体情况，需要权衡性能和逻辑需求来进行选择。