持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第十天, 点击查看活动详情
v-show与v-if的共同点
我们都知道在vue中v-show与v-if的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示
在用法上也是相同的
<Model v-show="isShow" />
<Model v-if="isShow" />
- 当表达式为true的时候，都会占据页面的位置
- 当表达式都为false时，都不会占据页面位置
v-show与v-if的区别
- 控制手段不同
- 编译过程不同
- 编译条件不同
控制手段： v-show隐藏则是为该元素添加css--display:none,dom元素依旧在。v-if显示隐藏是将dom元素整个添加或删除。
编译过程： v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
编译条件： v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染
- v-show由false变为true的时候不会触发组件的生命周期
- v-if由false变为true的时候，触发组件的beforeCreate、created、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestoyed、destoryed钩子。
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗
v-show与v-if的使用场景
v-if与v-show都能控制dom元素在页面的显示
v-if相比v-show开销跟大(直接操作dom节点增加与删除)
如果需要非常频繁地切换，则使用v-show较好
如果在运行时条件很少改变，则使用v-if较好
