平时在 vuejs 中用 v-if 使用习惯了,当突然看到 v-show 时,不由的产生了疑惑,既然有了 v-if, 为何还要 v-show.
v-if
条件渲染,即,使用了 v-if
- 如果满足条件,则整个子节点都会被渲染出来,包括事件的绑定等
- 如果不满足条件,则整个子节点都会被删除,包括事件也会被解绑
v-show
实际上就是 display:none 的快捷方式。
v-show 只是隐藏了节点的显示,但是节点还在,其绑定的事件也都还在。
v-if 和 v-show 的不同使用场景
从两者的原理可以看出,v-if 的来回切换成本很高。而 v-show 在初始化时,需要全部渲染,成本相对 v-if 要高。
所以
- 需要频繁切换状态的场景,使用 v-show
- 要加快初始化时的渲染速度,使用 v-if
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式