共同点: 控制元素的显示与隐藏
不同点:
- v-if 是动态的向DOM树里面添加或者删除元素;v-show 是通过给元素添加或者删除style=“display:none;”(行内样式)来控制显示与隐藏。如果该元素本身样式含有 display:none;那么 是无法通过切换值进行元素的显示 。
- v-if 切换有一个局部编译/卸载的过程,切换过程中会销毁和重建内部的事件监听和子组件;v-show只是简单的行内样式切换,只编译一次。故v-show 性能更好。
用法:
- 如果要频繁切换显示与隐藏时,使用 v-show(无论 true 或者 false 初始都会进行渲染,此后通过 css 来控制显示隐藏,因此切换开销比较小,初始开销较大)
- 如果不需要频繁切换某节点时,使用 v-if(因为懒加载,初始为 false时,不会渲染,但是因为它是通过添加和删除 dom元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大)