搞懂 v-if 和v-show

最新推荐文章于 2026-03-21 11:32:42 发布

原创最新推荐文章于 2026-03-21 11:32:42 发布 · 1.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue

收录于

本文详细介绍了Vue.js中v-if和v-show指令的相同点和区别。v-if和v-show都用于控制元素的显示和隐藏，但v-if通过移除DOM实现条件渲染，而v-show则是通过CSS的display属性。v-if在条件变化不频繁时有更好的性能，适合于需要较少切换的情况；v-show则适合频繁切换。在实际使用中，应根据应用场景选择合适的指令。

1.v-if和v-show的相同点

v-if 和v-show都能控制元素在页面上的显示与隐藏，它们的用法也是相同的

<Mondel v-if="isShow"/>
<Mondel v-show="isShow"/>

当表达式为true时，页面显示

当表达式为false时，页面隐藏

2.v-if和v-show的区别

控制手段：v-show隐藏则是为该元素添加css--display:none,dom元素依然存在，而v-if显示则是将dom元素整个删除和添加。

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中适当的销毁和重建内部的事件监听和自组件，v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会触发组件的生命周期，当v-if由false变成true的时候，会触发组件的beforeCreate,create,beforeMount,mounted钩子。由true变成false的时候触发组件的beforeDestory,destoryed方法。v-show则不会触发组件的生命周期。

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。