控制手段不同
- v-show是通过css控制显示
- v-if是将整个dom元素添加或者删除
编译过程不同
- v-show是通过为dom元素添加css属性:display:none实现是否隐藏
- v-if是通过局部的编译/卸载实现切换,切换过程中会合适的销毁和重建内部监听事件和子组件
编译的条件不同(触发生命周期)
v-if是真正的条件渲染,能够保证在切换的过程中适当销毁和重建内部监听事件和子组件
- v-show在true和false的切换中,不会触发生命周期
- v-if在true变为false的时候卸载dom,触发beforeDestoryed和destoryed
- v-if在false变成true的时候重建dom,触发beforeCreate、create、beforeMount、mounted
性能消耗不同
- v-show的初始渲染消耗个更多
- v-if的切换消耗更多
使用场景不同
- 频繁的切换,用v-show
- 初始渲染后,运行条件很少改变,用v-if