深入解析v-if与v-show的区别

深入解析v-if与v-show的区别

vue提供了两种条件渲染的方式 v-if 和 v-show,本文深入解析两者的区别。

1. 实现原理不一样

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。即通过设置元素的display:none,达到显示隐藏的作用。

2. 开销不一样

如果频繁的切换元素的状态，v-if的开销会比较大，因为它涉及到条件块内各组件的重建和销毁，而v-show只是切换元素的css，v-show的开销比较小。

3. 适用场景不一样

如果频繁的切换元素的状态，v-if的开销会比较大，，v-show的开销比较小。因此，v-show更适合频繁切换的场景。

当然，v-show只是设置了元素的display为none，元素dom结构还是在那里的，如果你不想让其他人看到这些dom，需要使用v-if。