Vue.js 中 v-if 和 v-show 的区别

官网是这样说的：

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。 
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。 
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

总结下： 
1、如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。v-show 不支持<template> 语法。 
2、v－show是通过控制display属性控制元素隐藏显示的，在频繁操作时候用，vue-if在初始化显示用（条件为真的时候，局部编译，否则啥都不做！） 
前端开发工具vue.js开发实践总结——关于v-if和v-show虽然都可以控制元素的显示和隐藏，但是它们是有区别的。如果用v-if的话，整个dom结构压根就不会出现在页面上，如果是用v-show的话，要视后面的条件来定，如果是true,则显示，如果为false,则加上style=”display:none”. 所以呢，如果是组件之类的大块头，个人觉得用v-if更好一些，如果是一些暂时性隐藏，一会要显示的，还是v-show更方便。对于v-style和v-show来比较，v-show相当于是v-style=”display:none”和v-style=”display:block”的快捷方式。