大家好,我是前端西瓜哥。今天来学习下 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;
的语法糖,只是加个样式而已。
我是前端西瓜哥,欢迎关注我,学习更多前端知识。