V-If与V-Show的区别)

自从学习了vue
总是会被问道v-if与v-show的区别
首先我们能知道的是v-show与v-if都是用来显示隐藏元素，v-if还有一个v-else来配合使用，两者达到的效果都一样，

V-If

在首次渲染的时候，如果条件为false时，什么也不操作，页面就会当作没有这些元素。而当条件为true时，开始局部编译，动态的向DOM元素里面添加元素。当条件从true变为false时，开始局部编译，卸载这些元素，也就是删除。

但此时也会有一个问题需要注意，那就是v-if的性能消耗问题，因为

v-if的操作涉及到了对dom元素的增删操作，每操作一次就会重新编译一次，

V-Show

与之相对的 V-Show则实现了更为方便简单也不会出现性能损耗的问题，

v-show不管条件是true还是false，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none的方式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。

使用场景

一般情况下 V-Show更适用于那些需要频繁切换显示与否的组件，最明显的例子就是tab切换一类，如果这个场景下使用的是V-If 势必会出现卡顿与加载缓慢的现象，与之相对的，V-If则更适合那些没那么频繁，甚至只会出现一次的的场景，例如弹窗小广告（滑稽），或者登录弹窗一类，