首先v-show和v-if都是控制元素是否在页面显示
-
v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是为该元素添加display:none样式,dom元素依旧存在。
-
v-if为条件渲染,初始渲染时如果为假,则什么也不做,为真时在开始渲染条件块;确保在切换过程中条件快内的事件监听和子组件适当的被销毁和重建;v-show不管条件是什么,都会被渲染,只进行css切换。
-
v-if由false变为true的时候,触发组件的beforeCreate、create、beforeMount、mounted钩子,由true变为false的时候触发组件的beforeDestory、destoryed方法。v-show 由false变为true的时候不触发生命周期。
-
v-if有更高的切换消耗;v-show有更高的初始渲染消耗(如需要频繁的切换,则v-show更好)。