- 控制手段不同
- 编译过程不同
- 编译条件不同
控制手段: v-show
隐藏则是为该元素添加 css--display:none
, dom
元素依旧还在。 v-if
显示隐藏是将 dom
元素整个添加或删除
编译过程: v-if
切换有一个局部编译 / 卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件; v-show
只是简单的基于 css 切换
编译条件: v-if
是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染
v-show
由false
变为true
的时候不会触发组件的生命周期v-if
由false
变为true
的时候,触发组件的beforeCreate
、create
、beforeMount
、mounted
钩子,由true
变为false
的时候触发组件的beforeDestory
、destoryed
方法
性能消耗: v-if
有更高的切换消耗; v-show
有更高的初始渲染消耗;
四、v-show 与 v-if 的使用场景
v-if
与 v-show
都能控制 dom
元素在页面的显示
v-if
相比 v-show
开销更大的(直接操作 dom
节点增加与删除)
如果需要非常频繁地切换,则使用 v-show 较好
如果在运行时条件很少改变,则使用 v-if 较好