v-if vs v-show

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。(注意，v-show 不支持 <template> 元素，也不支持 v-else。)

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

v-if和v-show设为false时都是进行了回流，因为都改变了页面的布局，v-if是直接销毁了dom元素，v-show是时dom元素脱离文本流。

v-if 与 v-for 一起使用

※永远不要把 v-if 和 v-for 同时用在同一个元素上。

vue2.x

在vue2.x中，v-for的优先级大于v-if，这意味着 v-if 将分别重复运行于每个 v-for 循环中，消耗不必要的性能。

vue3.x

在vue3.x中，v-if的优先级大于v-for，这意味着 v-if 将没有权限访问 v-for 里的变量。这将抛出一个错误，因为 v-if 指令将首先被使用，而迭代的变量 user 此时不存在。

一般我们在两种常见的情况下会倾向于这样做：

方法一

• 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

•  这可以通过迭代一个计算过的 property 来解决，筛选出满足条件的数组，然后再遍历，就像这样：

• 方法二

• 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

• 我们也可以使用 <template> 标签和 v-for 来包装 <li> 元素。

• 

更多详情请进入官网查询列表渲染 | Vue.js

欢迎评论，
留下一个赞吧👍