v-if和v-show的区别和使用场景

v-if和v-show作用看起来差不多，都是用来控制元素的显示、隐藏，当条件不成立时，其所对应的标签元素都不可见。

一、区别

 v-if 是让这个dom 存在与不存在的问题，而v-show这个dom一直存在，只是显示与不显示。

 

 1. v-if：

v-if在条件切换时，会对标签进行适当的创建和销毁。

 v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。即通过控制vue的虚拟dom树上的节点，来联动控制真实dom上的节点，从而控制元素的显示、隐藏。

2. v-show：

v-show则仅在初始化时加载一次

v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS（display）切换。

 3. 性能

v-if的开销相对来说会比v-show大，当在频繁切换的时候v-show, 在切换不频繁的时候用v-if, 因为v-if 在刚刚加载的时候产生dom， 当dom产生的时候会损耗点性能 。

二、使用场景

1. v-if适用于不需要频繁切换元素显示和隐藏的情况 

比如组件重置，其实就是给这个组件v-if , 然后给false, 再给true 就可以了。

2. v-show适用于需要频繁切换元素的显示和隐藏的场景。