v-show与v-if

更新: 2025/12/6 字数: 0 字 时长: 0 分钟

相同点

在不含v-else的情况下两者的作用效果相同，都能控制元素在页面上是否显示

用法也一致，根据判断true或者false来决定是否占据页面

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

不同点

控制手段

v-show是给元素样式添加css--display:none，dom元素依旧存在

v-if隐藏的方法是将dom元素整个添加或者删除，开销更大

编译过程

v-if切换有一个局部编译和卸载的过程，切换中合适地销毁或重建内部事件监听和子组件

v-show只是简单的css切换

编译条件

v-if是真正的条件渲染，会执行整个组件的生命周期，只有为假时不做操作，直到为真才渲染（有更高的切换性能消耗）

v-show不会触发组件的生命周期（有更高的初始性能消耗）