v-if和v-show的区别

v-show和v-if都是用来显示/隐藏元素，v-if还有一个v-else配合使用，两者达到的效果都一样，但是v-if更消耗性能的，因为v-if在显示隐藏过程中有DOM的添加和删除，v-show就简单多了，只是操作css。

初始操作不同：
v-if在条件为真的时候，才会创建DOM节点，如果在初始渲染时条件为假，则什么也不做,页面当作没有这些元素——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，也就是标签都会添加到DOM中，并且只是简单地基于 CSS 进行切换。

元素显示/隐藏的原理不同：
v-if根据条件渲染元素，条件为真的时候才会在页面中添加这个元素，一旦不满足条件，元素及它的数据绑定 / 组件被销毁。
v-show中添加真假切换的时候，对元素进行动态添加或取消“display:none”进行显示切换的。可以说只是改变css的样式，几乎不会影响什么性能。

适用场景不同：
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。