v-show和v-if有什么区别？和visibilty的区别

v-show 和 v-if 是 Vue.js 中的两种条件渲染指令，它们的作用都是根据条件来控制元素的显示和隐藏，但是它们有一些区别。

区别一：渲染方式
- v-show：通过 CSS 的 display 属性来控制元素的显示和隐藏。元素始终会被渲染到 DOM 中，只是通过修改 display 的值来切换显示状态。
- v-if：通过真实的 DOM 元素的插入和删除来控制元素的显示和隐藏。如果条件为假，元素将从 DOM 中移除；如果条件为真，元素将被插入到 DOM 中。

区别二：切换开销
- v-show：切换开销较低，因为元素始终存在于 DOM 中，只是通过修改 display 的值来切换显示状态。
- v-if：切换开销较高，因为元素会被插入或移除，涉及到 DOM 的操作。

区别三：初始化开销
- v-show：初始化开销较高，因为元素始终会被渲染到 DOM 中。
- v-if：初始化开销较低，因为元素只有在条件为真时才会被插入到 DOM 中。

关于 visibility 属性与 v-show 和 v-if 的区别：
- visibility：通过 CSS 的 visibility 属性来控制元素的可见性，隐藏的元素仍然占据空间。
- v-show：通过修改元素的 display 属性来控制元素的显示和隐藏，隐藏的元素不占据空间。
- v-if：通过插入和移除 DOM 元素来控制元素的显示和隐藏，隐藏的元素不占据空间。

总结来说，v-show 适合频繁切换显示状态的元素，而 v-if 适合在运行时条件不经常改变的情况下使用。而 visibility 属性则是控制元素可见性，隐藏的元素仍然占据空间。