前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍v-show和v-if的区别。
一、v-show和v-if的共同点
- 都是vue中控制元素是否页面中显示的;
- 用法上也是相同的。
<body>
<div id="app">
<div id="one" v-show="isShow1()"></div>
<div id="two" v-if="isShow2()"></div>
</div>
<script>
new Vue({
el:'#app',
methods: {
isShow1(){
return true
},
isShow2(){
return true
}
},
})
</script>
</body>
二、v-show和v-if的区别
- 控制手段:v-show隐藏则是为该元素添加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会调用addIfCondition方法,生成vnode的时候会忽略对应节点,render的时候就不会渲染;(惰性的)
- v-show会生成vnode,render的时候也会渲染成真实节点,只是在render过程中会在节点的属性中修改show属性值,也就是常说的display;
四、v-show与v-if的使用场景
- v-if与v-show都能控制dom元素在页面的显示;
- v-if相比v-show开销更大;
- 如果频繁更换,用v-show比较好;
- 如果在运行时很少改变,用v-if比较好。