面试篇之v-if与v-show

一、display：none与visibility:hidden的区别

1、display:none是彻底消失，从文档流中消失，浏览器也不会解析该元素

2、visibility:hidden是在视觉上消失了，可以理解为透明度为0的效果，在文档流中还继续占位

3、display：none不会被子元素继承

4、visibility:hidden会被子元素继承

***display：none只会隐藏元素，但不会从DOM中删除

visibility:hidden会渲染标签和里面的内容，而display:none不会渲染

二、v-if与v-show的区别

1、v-if控制的是元素在结构中的创建与销毁

v-show控制的是display属性中的属性值为none还是block

2、控制手段的区别

v-show隐藏只是将元素添加display:none，dom元素依旧存在

v-if是将dom元素整个添加或删除

3、编译过程的区别

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

4、使用场景

v-show适用于需要非常频繁地切换的地方

v-if适用于在运行时条件很少改变的情况