谈谈Vue.js里v-if与v-show的区别

在Vue项目中，v-if和v-show算是两个用得很频繁的指令，很巧的是它俩在表现上也相似，都是动态显示DOM元素。不过既然是两个不同指令，肯定会有不同的适用场景，带着好奇，让我们在Vue官方文档里一探究竟吧～

对于v-if大家应该不会陌生，不管哪种编程语言都会有if-else的流程控制。
例如，在Java中：

if (condition) {    //some code here} else {    //some code here, too}

当然在Vue.js中，v-if也是执行这样的功能。稍有不同的是在template中用v-if 条件渲染一整组，类似地，同时也可使用v-else指令来表示v-if的”else块”：

<div v-if="Math.random() > 0.5">Now you see me</div><div v-else>Now you don't</div>

另一个用于根据条件展示元素的选项是v-show指令，用法大致一样：

<h1 v-show=true>Hello!</h1>

不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的display属性。
看到这里大家应该对v-if与v-show的区别有一个简单的概念了。

接下来将会为大家详细介绍两者的不同：
v-if是”真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
同时v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且知识简单地基于css进行切换。

所以一般来说，v-if具有更高的切换开销，而v-show具有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if更好。