两则都是控制元素是否在页面上显示;
不同点 | v-if | v-show |
---|---|---|
手段 | 是组件真正的渲染和销毁,动态 控制元素的添加和删 除 | 通过控制css的display属性 来控制是否在页面显示。DOM元素不会消失,一直存在 |
编译过程 | 切换有一个局部编译/卸载的过程,切换过程中合适的销毁或重建内部的时间监听和子组件 | 只是简单的基于css的切换 |
编译条件 | v-if是惰性的,若条件为false,则不做任何处理,若为真,才开始局部编译 ; | v-show在任何条件下,都会编译 ,然后被缓存,而且dom元素保留 |
性能消耗 | 有更高的切换消耗 | 有更高的初始渲染消耗 |
应用场景 | 适合使用在条件不大可能改变的情况下 | 适合频繁切换 |
注意:
- v-if可以在template标签上使用,而v-show不能。因为 v-show 是通过 display 来控制标签进行渲染的,但是 template 标签在 vue 解析后是不会显示在页面上的 ,是虚拟 Dom,所以无法使用 v-show,但是 v-if 是可以使用在 template 标签上,因为 v-if 是条件渲染,只要满足 v-if 后的条件就可以完成渲染。
- 在表格中,控制el-table-column显示与隐藏使用v-show无效,需要使用v-if。