性能优化-vue v-show和v-if的区别以及什么时候使用

1.v-if是动态的向DOM树内添加或者删除DOM元素;

2.v-show是通过设置DOM元素的display样式属性控制显隐;

编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;

编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);

v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;

例:首次是条件是false 切不会多次重复编译的情况下用v-if 反之则v-show

    

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容