v-if 配合keep-alive使用

`v-if` 是 Vue.js 中的一个指令，用于条件渲染元素。它会基于给定的表达式的真假来决定元素是否应该被渲染。当 `v-if` 的值为 `false` 时，该元素及其子元素会被移出 DOM 树，从而节省内存和提高性能。当条件变为 `true` 时，元素才会重新插入到 DOM 中。

而 `keep-alive` 是 Vue 提供的另一个指令，用于缓存组件实例，当组件被切换出去时不会销毁，当再次匹配时可以复用已创建的实例，避免了重新渲染带来的性能开销。这在需要频繁切换显示状态但数据未发生变化（比如列表滚动到顶部后切换到详情页，回到列表时页面还停留在之前的位置）的情况下非常有用。

当你需要结合使用 `v-if` 和 `keep-alive` 时，通常的模式是：

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent" v-if="shouldRenderComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA', // 初始显示的组件
      shouldRenderComponent: false, // 判断当前组件是否需要显示
    };
  },
  methods: {
    switchComponent(newComponent) {
      this.currentComponent = newComponent;
      this.shouldRenderComponent = true; // 当切换组件时，设置为true以便显示
    }
  },
};
</script>

在上面的例子中，`switchComponent` 方法会被用来动态改变 `currentComponent` 的值，`v-if` 则会根据 `shouldRenderComponent` 的值来决定当前组件是否渲染。当组件A被切换到B时，先设置 `shouldRenderComponent` 为 `true`，然后 `ComponentA` 会被移出DOM，`ComponentB` 将被渲染并保留。

相关问题：
1. 何时应该在Vue中同时使用`v-if`和`keep-alive`？
2. 如何确保在`keep-alive`中的组件状态会被正确保存和恢复？
3. `v-if` 和 `keep-alive` 的组合如何避免不必要的重新渲染？