Vue v-if 与 v-show

v-if 与 v-show 的区别

v-if

优点:

1. 性能开销低：在初始渲染时，如果条件为 false，则不会渲染对应的 DOM 元素和组件。

2. 适用于条件变化不频繁的场景：因为组件和 DOM 元素会被销毁和重新创建，所以适合条件变化不频繁的场景。

缺点:

1. 重新渲染开销大：每次条件变化导致组件销毁和重新创建时，会有较大的性能开销，尤其是组件复杂或包含大量子组件时。

2. 状态丢失：组件被销毁后，其内部状态会丢失。

使用场景

• 条件变化不频繁的场景。

• 需要在条件变化时完全销毁和重新创建组件的场景。

• 需要节省初始渲染开销的场景。

v-show

优点:

1. 切换开销低：只是通过 CSS 切换 display 属性来控制显示和隐藏，不会销毁和重新创建组件。
2. 状态保留：组件状态不会因为显示和隐藏而丢失。

缺点:

1. 初始渲染开销大：即使条件为 false，组件和 DOM 元素也会被渲染，只是被隐藏。

2. 适用于条件变化频繁的场景：因为切换显示和隐藏的开销较低，所以适合条件变化频繁的场景。

使用场景

• 条件变化频繁的场景。

• 需要保留组件状态的场景。

• 组件初始渲染开销可以接受的场景。

碰到实际场景

<!-- 使用v-if -->
<template v-for="widget in item.childList" :key="widget.key">
  <div v-if="widget.key == getWidgetKey()">
    <!-- <KeepAlive>  这里使用缓存组件已经失效了，上面的v-if会把里面的整体重新渲染 -->
    <component :is="widgetConfigComponents[widget.type]" />
    <!-- </KeepAlive> -->
  </div>
</template>

<!-- 使用v-show -->
<template v-for="widget in item.childList" :key="widget.key">
  <div v-show="widget.key == getWidgetKey()">
    <component :is="widgetConfigComponents[widget.type]" />
  </div>
</template>

• 上述代码中遍历了 item.childList，根据 widget.key 判断是否显示组件，如果 widget.key 与 getWidgetKey() 相等，则显示组件，否则隐藏组件。

• 这时候使用 v-show 就全部渲染了如果很多就不好了， 但是使用 v-if 又经常切换导致切换一次重新渲染一次。

总结

• v-if：适用于条件变化不频繁且初始渲染开销较大的场景。适合需要完全销毁和重新创建组件的情况。

• v-show：适用于条件变化频繁且需要保留组件状态的场景。适合切换显示和隐藏的开销较低的情况。

选择指南:

• 如果你的组件在条件变化时需要频繁切换显示状态，并且你希望保留组件的状态，使用 v-show。

• 如果你的组件在条件变化时不需要频繁切换，并且你希望在条件为 false 时完全销毁组件以节省内存，使用 v-if。