v-if 和 v-show 的区别

一、原理区别

1. v-if

这是一个指令，用于条件性地渲染一个元素块。当`v-if`表达式的值为`true`时，元素及其包含的子元素才会被渲染到 DOM 中；当表达式的值为`false`时，元素及其子元素会被完全移除。这意味着在切换`v-if`的条件时，Vue.js 会进行真实的 DOM 创建和销毁操作。

2. v-show

`v-show`也是一个用于控制元素显示和隐藏的指令。不同的是，当`v-show`表达式的值为`true`时，元素会以`display: block`（对于块级元素）或`display: inline`（对于内联元素）等正常的显示样式显示；当表达式的值为`false`时，元素会被设置为`display: none`的样式，从而隐藏起来，但元素本身仍然存在于 DOM 中。

二、性能特点区别

1. v-if

因为`v-if`涉及到 DOM 的创建和销毁，所以在切换条件比较频繁的情况下，性能开销会比较大。每次条件变化导致元素需要重新渲染时，Vue.js 都需要重新构建 DOM 树的一部分，这包括创建新的 DOM 节点、添加事件监听器等操作。但是，如果一个元素在初始加载后很少会改变显示状态，那么`v-if`是一个很好的选择，因为它不会在初始加载时渲染不必要的元素，从而减少了初始 DOM 的大小和加载时间。

2. v-show

由于`v-show`只是简单地改变元素的`display`属性，而不涉及 DOM 的创建和销毁，所以在频繁切换元素显示状态的场景下，性能相对较好。不过，因为元素始终存在于 DOM 中，所以在初始加载时，无论元素是否需要显示，都会被加载并占用一定的内存空间。如果有大量元素使用`v-show`并且初始时大部分元素是隐藏的，可能会导致初始页面加载时间变长和内存占用增加。

三、使用场景区别

1. v-if

适用于根据用户权限显示不同的界面部分。也适用于在某些条件下才会出现的组件，并且这些组件出现的频率较低。

2. v-show

适合用于需要频繁切换显示和隐藏状态的元素。对于一些需要根据页面状态（如加载状态、筛选状态等）来显示或隐藏的元素，也可以使用`v - show`。