v-if 和 v-show 的区别
共同点:都是动态地显示 dom 元素
区别:
- 手段不同:
v-if 是动态地向 dom 树内添加或者删除 dom 元素
v-show 是通过 dom 元素 display 样式属性控制显隐 - 编译过程不同:
v-if 切换有一个局部编译/卸载的过程,在切换过程中合适的销毁和重建内部的事件监听和子组件
v-show 只是简单的基于 css 样式切换 - 编译条件不同:
v-if 是惰性的,如果初始条件为假,则什么都不做,只有条件在第一次为真时,才开始局部编译
v-show 在任务条件下都被编译,然后被缓存,而且 dom 元素保留 - 性能消耗不同:
v-if 有更高的切换消耗
v-show 有更高的初始渲染消耗 - 适用场景不同:
v-if 适合运营条件不大可能改变的场景
v-show 适合频繁切换的场景