Vue 的 v-if 与 v-show 的区别

最新推荐文章于 2025-08-17 19:33:33 发布

原创最新推荐文章于 2025-08-17 19:33:33 发布 · 335 阅读

CC 4.0 BY-SA版权

文章标签：

16 篇文章

订阅专栏

本文详细对比了Vue.js框架中v-if与v-show指令的差异，包括它们的编译过程、条件渲染方式、性能消耗及适用场景。v-if在条件变化时会重新渲染DOM，而v-show则通过CSS控制元素的显示与隐藏。

 v-if 与 v-show 的共同点

区别：

1、编译过程：v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show的元素始终会被渲染并保留在 DOM 中。v-show只是简单地切换元素的 CSS 属性display。
2、编译条件：v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
3、性能消耗：v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
4、应用场景：v-if适合运行时条件很少改变时使用。v-show适合频繁切换。