面试题：Vue组件化开发中，如何通过合理使用v - if和v - show来优化性能？

Question

在Vue组件化开发场景下，阐述v - if和v - show在原理及适用场景上的区别，并举例说明如何根据业务需求合理选择它们以达到性能优化的目的。

Answer 1

原理区别

• v-if：是“真正”的条件渲染，它会根据表达式的值在DOM中添加或移除元素。在切换时，元素及其数据绑定和组件被销毁并重建。如果初始条件为假，则不会渲染该元素，直到条件变为真时才会渲染。例如<div v-if="isShow">内容</div>，当isShow为false时，该div及其内部内容不会在DOM中存在。
• v-show：只是简单地切换元素的CSS display属性。无论初始条件如何，元素都会被渲染，只是通过改变display属性来控制其显示或隐藏。例如<div v-show="isShow">内容</div>，即使isShow为false，该div在DOM中依然存在，只是display为none。

适用场景区别

• v-if：适用于在运行时条件很少改变的场景，因为其切换开销较大。比如用户权限判断，只有管理员能看到的功能模块，<div v-if="isAdmin">管理员功能</div>，因为用户权限在登录时确定后很少改变，使用v-if可避免不必要的DOM渲染。
• v-show：适用于频繁切换显示状态的场景，由于只是改变display属性，切换开销小。比如一个按钮控制的弹出层，<div v-show="isPopupVisible">弹出层内容</div>，用户频繁点击按钮显示或隐藏弹出层，使用v-show能提高性能。

性能优化示例

假设页面有一个用户登录后才显示的导航栏，由于用户登录状态在登录后很少改变，使用v-if能优化性能。

<template>
  <div>
    <nav v-if="isLoggedIn">
      <a href="#">首页</a>
      <a href="#">个人中心</a>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    }
  }
}
</script>

若页面有一个可折叠的侧边栏，用户可能频繁展开或收起，此时使用v-show更好。

<template>
  <div>
    <aside v-show="isSidebarOpen">
      <ul>
        <li>侧边栏选项1</li>
        <li>侧边栏选项2</li>
      </ul>
    </aside>
    <button @click="isSidebarOpen =!isSidebarOpen">切换侧边栏</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSidebarOpen: true
    }
  }
}
</script>