面试题：Vue中v-if与v-show在性能表现上的区别

Question

请阐述在Vue中，v-if和v-show在性能方面的不同点，并举例说明在何种场景下应优先选择使用v-if以达到更好的性能，何种场景下应优先选择v-show。

Answer 1

v-if和v-show性能不同点

• v-if：是“真正”的条件渲染，它会在条件切换时，销毁或重建条件块内的DOM元素及其绑定的事件监听器和子组件等。这意味着如果初始条件为假，相关DOM元素不会被渲染到页面，直到条件变为真。由于涉及到创建和销毁操作，所以在条件切换频繁时，性能开销较大。
• v-show：只是简单地通过CSS的display属性来控制元素的显示与隐藏，无论初始条件真假，元素始终会被渲染到页面，只是初始条件为假时，元素的display值为none。所以它的初始渲染开销较大，但在条件切换时，由于只是修改CSS属性，性能开销相对较小。

优先使用v-if的场景

当条件在运行时很少改变时，优先使用v-if。例如，页面上有一个“新用户引导”板块，只有在用户首次登录时才会显示，之后不会再改变。这种情况下，使用v-if可以避免初始不必要的DOM渲染，提升性能。

<template>
  <div>
    <div v-if="isFirstLogin">
      <p>欢迎新用户，这是首次登录引导内容...</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFirstLogin: true // 假设首次登录时为true，后续可根据业务逻辑修改
    };
  }
};
</script>

优先使用v-show的场景

当条件需要频繁切换时，优先使用v-show。比如一个页面上的开关按钮，用于控制某个元素的显示或隐藏，每次点击按钮都要切换显示状态。

<template>
  <div>
    <button @click="toggleShow">切换显示</button>
    <div v-show="isShow">
      <p>这是根据开关显示或隐藏的内容</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    toggleShow() {
      this.isShow = !this.isShow;
    }
  }
};
</script>