Vue面试宝典

    

01

    

Q:

请问 v-if和v-show的区别？

A:

共同点：都用于动态显示DOM元素；

不同点：

1. 编译过程：v-if是正真的条件渲染，因为它会确保在切换过程中条件块的事件监听器 和子组件适当地被销毁和重建。 v-show的元素始终会被渲染并保存留在DOM中，只是简单地切换元素的 CSS属性 display。

2. 编译条件：v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做，直到第一次变为真时，才开始渲染条件块。v-show 不管条件是什么，元素总是会被渲染，并且只是简单的切换。

3. 性能消耗：v-if有更高的切换消耗；v-show有更高的   初始渲染消耗。

4. 应用场景：v-if 适合运行在条件很少改变时使用； v-show适合频繁切换。

“

长按二维码关注我们吧