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

112 阅读2分钟

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

好了本节课就到这里,怎么样,是不是感觉很简单???感觉简单的话,就立马关注下本公众号吧~ 进群学习请加v:qingwanjianhua

本文使用 文章同步助手 同步