《跟热饭一起学习vue吧》Part.12 v-show

v-show

v-show指令和v-if指令的作用一样，都是跟后面的表达式真假来决定元素标签是否展示的。

比如：

<h1 v-show="ok">Hello!</h1>

看到了这，很多同学都一眼就明白了。

但是紧接着就是疑惑，为什么明明已经有v-if了，还要创造个v-show出来呢？

答案很简单：他俩的真正实现技术 和 性能效果是有差异的。

简单来说就是：v-if刚进入页面时候展示的很快，但是后面动态判断来回切换真假的时候，就慢了。而v-show正好相反。

v-show 和 v-if的区别

实现技术不同

v-if是动态的向dom树里添加和删除元素

v-show是控制元素的display样式来决定是否隐藏显示元素

编译过程不同

v-if切换过程比较麻烦，要来回销毁或重建元素所关联的一些事件函数，子组件等等。

v-show则不用考虑这些。

依赖条件不同

v-if 是惰性的，如果初始为假，那么它什么都不做。只有第一次变成真的时候，才开始添加元素和关联的一堆东西。

v-show 则不管真假，都会刚进页面开始就编译，就执行，所以在一开始初始化时候要略慢于v-if。

性能消耗不同

v-if 来回切换显然性能消耗代价更大 v-show 则是在初始化时候性能消耗代价更大

使用场景不同

v-if适合不频繁变化的场景 v-show适合频繁切换真假的场景

好了本节课就到这里，怎么样，是不是感觉很简单？？？