<center>v-if 和 v-show的区别-----v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低</center>

原创于 2019-08-27 11:35:28 发布 · 置顶 · 573 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文深入解析了VUE中的v-if与v-show指令，详细对比了两者的实现方式、编译过程、性能消耗及适用场景。v-if通过动态添加或删除DOM元素实现元素的显示与隐藏，而v-show则通过CSS的display属性控制元素的可见性。v-if更适合条件不常变化的情况，v-show则适用于频繁切换显示状态的场景。

                    
                    VUE指令v-ifv-show
共同点动态显示DOM元素动态显示DOM元素
手段动态的向DOM树内添加或者删除DOM元素设置DOM元素的display样式属性控制显隐
编译过程有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件简单的基于css切换
编译条件惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留
性能消耗v-if有更高的切换消耗v-show有更高的初始渲染消耗
使用场景v-if适合运营条件不大可能改变v-show适合频繁切换

VUE指令	v-if	v-show
共同点	动态显示DOM元素	动态显示DOM元素
手段	动态的向DOM树内添加或者删除DOM元素	设置DOM元素的display样式属性控制显隐
编译过程	有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件	简单的基于css切换
编译条件	惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译	在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留
性能消耗	v-if有更高的切换消耗	v-show有更高的初始渲染消耗
使用场景	v-if适合运营条件不大可能改变	v-show适合频繁切换