Vue 中 v-if 和 v-show 有什么区别？

大家好，我是前端西瓜哥。今天来学习下 Vue 中 v-if 和 v-show 的区别。

v-if

v-if 是条件渲染，表示一个元素能否渲染出来。

如果为真，元素就会挂载并显示出来。

如果为假，元素会被销毁，并在 DOM 树上留下一个 HTML 注释。

v-if 适合用来做组件的懒加载。

如果组件的创建非常消耗资源，且不会立即使用，在特定条件下才会出现（比如级联选择器），可以考虑通过 v-if 设置为 false，先不进行加载。

频繁地使用 v-if 切换 true 和 false，会导致组件的频繁地销毁和重建，这时候或许考虑使用 v-show。

v-if 可以搭配 v-if-else、v-else 这些指令，实现一些较为复杂的逻辑。

v-show

v-show，其实就是给根节点加上或移除 display: none; 属性。

因为这种显示隐藏元素的方式使用得比较多，所以 Vue 官方把它做成了内置指令。

display: none; 的特性是将元素隐藏，且在 DOM 树中不占据空间大小，会导致其下方的元素往上跑。

和 v-if 不同的是，v-show 不会导致组件的销毁，组件还是在那里，不会因为销毁导致内部状态（比如滚动高度）丢失。

v-show 没有惰性加载的能力。

有时候，我们可能希望将元素隐藏，但让它仍旧占据空间。这时候我们可以使用 visibility: hidden;。

这个 Vue 倒是没提供内置指令，我们需要用 style 自行实现：

<HelloWorld
  :style="{
    visibility: visible ? 'hidden' : '',
  }"
  msg="Hello Vue 3 in CodeSandbox!"
/>

结尾

总的来说，v-if 可以控制组件的销毁和重建，可以实现惰性加载；v-show 则是 display: none; 的语法糖，只是加个样式而已。