。
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适合频繁切换真假的场景