前端 元素显示 相关基础知识

v-if与v-show的区别

v-if：直接对DOM进行处理，当v-if为false的时候，销毁该元素，如果程序频繁切换元素，则会消耗大量内存
v-show：元素始终被编译保留，只有在初始时会消耗大量内存，适合需要频繁切换元素时使用

opacity:0 display:none visibility:hidden的区别

display:none

隐藏后不占据空间，会导致回流和重绘；隐藏后绑定的事件无法被触发

opacity: 0

隐藏后仍占据空间，会导致重绘；隐藏后绑定的事件可以被触发

visibility:hidden

隐藏后仍占据空间，会导致重绘；隐藏后绑定的事件无法被触发