Vue中 v-if 和 v-show 的使用_vue 隐藏元素 保留高度

Vue中 v-if 和 v-show 的使用

• 两者的相同点

  • 功能相同：都可以用来隐藏DOM，且隐藏的DOM不会占据空间

  • 用法相同：判断表达式的真假，真就显示DOM，假就隐藏DOM

    <div v-if="expression"></div>
    <div v-show="expression"></div>
    1
    2

• 两者的不同点

  • 控制手段：
    • v-if是将DOM彻底地从页面中删除来让DOM不展示在页面中，改变了页面的DOM解构
    • v-show是通过设置CSS的属性display:none来让DOM不展示在页面上，但是DOM仍然存在，可以通过F12查看到被隐藏的DOM，没有改变页面的DOM解构
  • 编译过程：
    • v-if的条件切换会引起一个局部编译的过程，切换过程中会适当销毁和重建内部的事件监听器和子组件
    • v-show的条件切换并不会引起局部编译，只是简单的基于CSS的切换
  • 触发钩子：
    • v-if的条件切换会触发组件的钩子。false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法
    • v-show的条件切换不会触发组件的钩子
  • 性能消耗：
    • v-if有更高的切换消耗
    • v-show有更高的初始渲染消耗

• v-if和v-show的应用场景

  • v-if适合那些切换不频繁的DOM，切换需要触发组件钩子的DOM
  • v-show适合那些切换频繁的DOM，切换不需要触发组件钩子的DOM

拓展：display:none与visibility:hidden

• 相同点：都能将DOM从页面中进行隐藏，但隐藏的DOM还在，能使用F12查看到

• 不同点：

  • 隐藏效果

    • display:none隐藏的DOM，它宽度、高度等各种属性值都将丢失，不占据页面上的位置

    • visibility:hidden隐藏的DOM，它的宽度、高度等各种属性值不会丢失，仍然会咱局页面上原有的位置，只是视觉上的隐藏

  • 加载

    • display:none隐藏的DOM只有编程block时才会被加载到页面
    • visibility:hidden一开始就会被加载到页面

  • 继承性

    • display:none设置后，其后代全部默认继承该属性，且无法进行修改
    • visibility:hidden设置后，其后代元素全部默认继承该属性，但是其后元素使用了visibility:visible，则从该个后代开后，其下所有的后代都不继承visibility:hidden属性，也就是都可以显示出来

  • 渲染

    • display:none会触发reflow（回流），进行渲染
    • visibility:hidden只会触发repaint（重绘），因为没有发现位置变化，不进行渲染

参考资料：

• 面试官：v-show和v-if有什么区别？使用场景分别是什么？ | web前端面试 - 面试官系列 (vue3js.cn)