vue面试之“v-if与v-show”的区别

1.v-if
    写法：
    (1).v-if="表达式" 
    (2).v-else-if="表达式"
    (3).v-else="表达式"
    适用于：切换频率较低的场景。
    特点：不展示的DOM元素直接被移除。
    注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”（中间不能有其他标签）。
    2.v-show
    写法：v-show="表达式"
    适用于：切换频率较高的场景。
    特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉                        
    3.备注：使用v-if的时，元素可能无法获取到（因为元素移除了），而使用v-show一定可以获取到（只是显示与隐藏）。
    注意：
    v-if与template的配合使用,不能跟v-show使用，template最大的好处是不会破坏html样式结构
 

总结区别：

1.v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”（中间不能有其他标签）v-show是不能这样的

2.使用v-if的时，DOM元素可能无法获取到（因为元素移除了），而使用v-show一定可以获取到（只是显示与隐藏）。

3.v-if切换频率较低的场景 ,v-show切换频率较高的场景