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

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

v-show

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


比如:


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


image.png


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


但是紧接着就是疑惑,为什么明明已经有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适合频繁切换真假的场景

相关文章
|
1月前
vue3学习(3)
vue3学习(3)
|
25天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
49 11
|
2月前
|
JavaScript 开发者
vue学习之响应式数据绑定
响应式数据绑定
28 0
|
16天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
116 58
|
25天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
202 65
|
25天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
219 62
|
1月前
|
JavaScript 前端开发
vue3学习(1)
vue3学习(1)
98 44
|
16天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
30 2
|
24天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
48 10
|
24天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
37 9
下一篇
无影云桌面