前端面试题（二）：vue2中v-if和v-show的区别

在 Vue 2 中，v-if 和 v-show 都是用于控制元素的显示和隐藏，但它们的工作原理和适用场景有所不同。下面是它们的主要区别：

1. 工作原理：

• v-if：

  • v-if 是条件渲染，只有当条件为 true 时，Vue 会将元素添加到 DOM 中。如果条件为 false，元素会被销毁（从 DOM 中移除），并且所有的绑定和事件监听也会被销毁。
  • 当条件发生变化时，Vue 会重新创建或销毁这个元素，可能会影响性能，特别是在条件频繁变化的情况下。

  例子：

  <div v-if="isVisible">这是一个可见的元素</div>
  

  这里，isVisible 为 true 时，<div> 元素会渲染到 DOM 中，否则会被完全销毁。

• v-show：

  • v-show 是简单的显示/隐藏，它并不销毁元素，而是通过修改 CSS 的 display 属性来控制元素的显示与隐藏。即使条件为 false，元素依然存在于 DOM 中，只是 display: none，不会渲染出来。
  • 由于 v-show 只是通过 CSS 控制元素显示与否，切换状态的开销较低，但它初次渲染时依然会渲染元素。

  例子：

  <div v-show="isVisible">这是一个可见的元素</div>
  

  这里，isVisible 为 true 时，<div> 元素会显示，false 时会被隐藏（display: none）。

2. 性能差异：

• v-if：当条件变化时，v-if 会根据条件动态地添加或销毁 DOM 元素。对于经常需要切换显示与隐藏的场景，v-if 的性能开销较大，因为它需要进行 DOM 操作。

• v-show：v-show 在初次渲染时会始终渲染元素，只是通过 display: none 控制显示隐藏，因此性能开销较小，适用于需要频繁切换显示状态的场景。

3. 适用场景：

• 使用 v-if 的场景：

  • 当需要根据某个条件来动态地添加和删除元素时，使用 v-if。
  • 适用于条件变化不频繁的情况，或者元素比较复杂时，销毁元素时会减少内存消耗。

  适用场景示例：加载一个页面组件，基于条件动态添加或删除。

• 使用 v-show 的场景：

  • 当你需要频繁地切换元素的显示与隐藏时，使用 v-show。
  • 适用于只需要控制显示/隐藏而不需要动态销毁的简单元素，尤其是在需要频繁改变元素状态时，性能上更优。

  适用场景示例：切换标签页，显示不同的内容，或者展开/折叠菜单等。

4. 初次渲染的差异：

• v-if：在初次渲染时，v-if 不会渲染该元素，只有在条件为 true 时，元素才会被添加到 DOM 中。因此，第一次渲染时比较慢。

• v-show：在初次渲染时，v-show 会直接渲染元素并应用 display: none 来隐藏它。虽然元素在一开始就渲染出来了，但切换显示和隐藏的速度非常快。

5. 总结对比表：

特性	v-if	v-show
渲染时机	条件为 true 时渲染，false 时销毁	始终渲染，使用 display: none 控制显示
性能开销	初次渲染时较慢，频繁切换时较慢	初次渲染时较快，频繁切换时较快
使用场景	条件变化不频繁的场景，元素复杂时	条件变化频繁，切换简单显示/隐藏场景
适合的操作	需要销毁/重新创建元素的场景	需要频繁切换显示状态的场景

6. 推荐的使用方式：

• 使用 v-if 当条件不频繁变化时，或者元素较复杂，销毁后可以释放资源。
• 使用 v-show 当你需要频繁切换元素的显示和隐藏时，尤其是简单的元素，且不关心销毁元素的性能开销。

通过选择合适的指令，可以优化页面的性能和用户体验。