display:none与visibility:hidden的区别

是否在渲染树中

• display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
• visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

是否是继承属性

• display:none是非继承属性，子孙节点会随着父节点从渲染树消失，不是因为继承了display:none，相当于整个节点被移除了,通过修改子孙节点的属性也无法显示（都移除了如何获取子孙节点？设置属性感觉也没啥用）；
• visibility:hidden是继承属性，子孙节点消失是由于继承了hidden,通过设置visibility:Avisible可以让子孙节点显示；
• 修改常规文档流中元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘
• 如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取（读屏器会选择性读取，只会读取visibility:hidden的内容）。

  这两者的关系类似于v-if和v-show之间的关系

v-if 和 v-show 都是Vue.js框架中用于条件性渲染元素的指令，但它们的工作机制和使用场景有所不同。

v-if

• 工作机制：v-if 是一个条件渲染指令，它是“真正”的条件渲染，因为它确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• 性能开销：因为 v-if 的元素可能被销毁和重建，所以切换时会有更高的性能开销。
• 使用场景：当元素需要频繁切换时，使用 v-if 可能会导致性能问题，因为它会不断地创建和销毁元素。因此，v-if 更适合条件不经常改变的情况。

v-show

• 工作机制：v-show 只是简单地切换元素的 CSS 属性 display。元素始终被保留在DOM中，它只是简单地切换显示与隐藏。
• 性能开销：初始渲染时有更高的开销，因为无论条件是否为真，元素总是会被渲染并保留在DOM中，但是切换开销较小，因为只是改变了CSS。
• 使用场景：当元素需要非常频繁地切换显示状态时，使用 v-show 是更好的选择，因为它的性能开销较小。

之间的关系

• 共同点：都是用来根据条件展示或隐藏元素。
• 不同点：
  • v-if 是“真正”的条件渲染，条件为假时不会渲染元素。
  • v-show 则始终渲染元素，只是简单地切换元素的CSS display 属性。
  • v-if 有更高的切换开销，v-show 有更高的初始渲染开销。
  • 使用场景不同，v-if 适用于条件变化不频繁的情况，v-show 适用于条件变化非常频繁的情况。