- 手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;
- 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
- 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下,无论首次条件是否为真,都被编译,然后被缓存,而且DOM元素保留;
- 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
- 使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。
vue中v-if和v-show的区别
小彭努力中2024-03-24 2:36
相关推荐
英俊潇洒美少年1 小时前
Vue 生产环境打包:SourceMap、压缩、混淆、加密全解 + 最佳实践巴博尔2 小时前
UNIAPP中NVUE页面 动画她说人狗殊途4 小时前
基于 vue-cli 创建AZaLEan__5 小时前
前端移动端适配与 Bootstrap大家的林语冰5 小时前
Deno 2.8 正式发布,再次超越 Bun,史上最大的次版本升级诞生!渣渣xiong5 小时前
从零开始:前端转型AI agent直到就业第五十七天-第五十八天AI周红伟5 小时前
周红伟:长鑫科技(CXMT)财务全景分析excel5 小时前
JS 正则在多次 test() 时为什么会出现 lastIndex 缓存问题?IT_陈寒6 小时前
为什么 Java 的 Optional 让我调试到深夜?米丘6 小时前
React 19.x 的 lazy 与 Suspense