Vue之v-if和v-show的区别与应用场景，display：none和visible：hidden区别

区别：

v-if 和 v-show 都是用来控制DOM的显示隐藏，但是而这却有很大的区别

1. v-if是通过控制dom节点的 存在与否，来控制元素的显隐，而v-show是通过设置dom的display：none；或者 display：block，来控制显隐

2. v-if每次切换，都会重新创建或者销毁dom，比较消耗性能，如果初始条件为false，就不会创建标签，如果为true，才会创建标签；而v-show不管初始值为什么，都会创建标签，所以拥有较高的初始渲染耗能

总结：如果频繁切换显隐，就用v-show，如果很少切换，就用v-if

关于display：none 和 visible：hidden 的区别

这里也大概提一下二者的区别
display：none； 该元素以及它的后代元素都会隐藏，并且占据空间消失；会有回流
visible：hidden； 隐藏元素，但是仍占据与未隐藏之前一样的空间；后代元素设置visible，后代元素可显示；不会回流