对于v-if 和 v-show的选择 --Vue.js

引言：

对于v-if和v-show都可以控制元素的显隐，但是因为两者控制显隐方式的不同，所以试用的场合还是不同的。

一、v-if 控制显隐方式

v-if 是惰性的，如果初始渲染的条件为假，那么什么事情都不做，在第一次变为真的时候才开始局部渲染。这就导致当条件为假的时候在条件块里面的子组件不会被渲染，而且时间监听器也不会生效。当条件切换时会有销毁、重建的过程，所以说，v-if才是真正的条件渲染

二、v-show控制显隐方式

v-show其实是通过控制节点css属性中的display：none与否来控制是否显示。所以v-show无论条件真假都会进行编译并且保留编译，只是简单基于css切换

总结：

1、根据对比可知，v-if有更高的切换消耗，v-show有更高的初始渲染消耗。因此，如果需要频繁切换就采用v-show，如果运行条件不太可能改变，就采用v-if

2、v-if与v-else搭配，v-show也可以使用取反来模拟例如：

<span v-show = "show">I am v-show</span>
<span v-show = "!show">I am else</span>