v-show 与 v-if 的区别

更新日期: 2019-08-14 阅读次数: 8159 字数: 248 分类: VueJS

平时在 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 聊聊, 查看更多联系方式