v-if 和 v-show的比较

v-if指令
根据表达式的值动态地插入或者移除DOM元素

最后在DOM树中，显示如下：

Directive1

可以看出符合条件的template在DOM树中显示了出来，
不符合条件的template没有出现在DOM树中。


v-show指令
根据表达式的值来显示或者隐藏DOM元素

在chrome的element中显示如下：

Directive1

Directive2

可以看到在DOM树中Directive1和Directive2都存在，
但是Directive2不显示而已。我们可以看到style="display: none;"
样式的存在。


从用户的角度来看，v-if和v-show没有区别，因为用户不关心底层的实现原理。
但是作为开发人员必须知道v-if和v-show的区别，在什么情景下适合使用v-if，
在什么场景下适合使用v-show。
v-if是真实的渲染，v-show则是通过CSS样式的简单切换来实现dom元素的显示和隐藏。
如果频繁地进行模块的切换，显然使用v-if是不合适的，因为每一次都会卸载或者编译，
这种切换消耗是比较高的。此时，采用v-show更为合适。v-show模块只卸载或者编译一次。
它的切换仅仅只是通过CSS实现，切换消耗主要是渲染消耗。