首页 > 其他 > 详细

vue v-if与v-show的深入思考

时间:2020-06-19 09:35:12      阅读:59      评论:0      收藏:0      [点我收藏+]

1、v-if与v-show的区别

v-if是一个惰性元素,只有满足条件,才会渲染,所以在项目中用v-if,在页面初始化的性能上占有优势,但如果页面加载完成后,需要频繁控制页面的显示隐藏时,v-if就会不断卸载、渲染组件造成较大的切换开销。

v-show就是不管满不满足条件,都会进行渲染(与v-if相反,初始渲染成本大),渲染成功后通过display属性控制显隐,由于组件是通过css控制显隐,而不是卸载、重新渲染,所以v-show的切换成本小,但渲染成本大。

2、v-if与v-show的优化思考

vue结合v-if与v-show的特点,创造了一个组件keep-alive,具体使用方法如下,v-if控制显隐,降低页面初始开销,keep-alive缓存组件,降低组件切换开销,结合v-if和v-show的优点

<keep-alive>
    <customA v-if="a==1"/>   //自定义的组件
    <customB v-if="a==2"/>
</keep-alive>

  

vue v-if与v-show的深入思考

原文:https://www.cnblogs.com/uimeigui/p/13161198.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!