vue中v-if和v-show的区别

1.v-if

v-if是通过控制dom节点是否生成来控制元素的显示和隐藏

例如：

<template>
  <div id="app">
    <div id="content" v-if="false">v-if隐藏</div>
  </div>
</template>

可以看到并没有生成id为content的dom节点

2.v-show

v-show生成了dom节点，之后通过dom节点的内联样式display来控制元素的显示和隐藏
v-show为true相当于display:block，false相当于display:none
例如：

<template>
  <div id="app">
    <div id="content" v-show="false">v-show隐藏</div>
  </div>
</template>

可以看到生成了id为content的dom节点，并设置了内联样式display:none

3.v-if和v-show的比较和使用场景

比较：v-if是“真正”的条件渲染，它会在切换的过程中确保元素的销毁和重建而v-show则不管条件是什么，都会进行渲染，之后通过css样式的切换来控制元素的隐藏和显示，所以对于切换来说v-if有着更高的切换开销。

使用场景：因为v-if有着更高的切换开销，所以一般用于条件很少改变的场景，如果条件非常频繁切换则适用v-show