display:none和visibility:hidden的区别,以及v-show与if的区别

先说结论

display:none

1.在文档流中不占据位置。
2.所以在修改display的时候会引起回流和重绘。
3.子孙节点都不可见。不论子孙节点设置任何属性（因为第二条）

visibility:hidden

1.在文档流中会占据位置，虽然不可见但是它的位置还会空出来。
2.只会引起重绘，
3.子孙节点是没有设置visible的话是可见的。

带着结论去对比下面的例子

v-show v-if

vue中v-show就是通过display:none实现的，一般用于弹窗。
vue中v-if是添加了这个属性的元素，如果是false,就直接移除DOM;这个一般用于选择，就比如当用户是学生就显示书籍，用户是成年人就显示工作。