面试题：Vue 如何缓存当前组件？缓存后如何更新？

在 Vue 中，缓存当前组件可以通过 keep-alive 实现。keep-alive 是 Vue 提供的一个内置组件，用于缓存动态组件或路由组件，从而避免组件的重复渲染和销毁。以下是缓存组件及其更新的详细方法：

1. 使用 `keep-alive` 缓存组件

keep-alive 可以将组件缓存到内存中，当组件切换时，不会销毁组件，而是保留其状态。

基本用法

<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
};
</script>

include：指定需要缓存的组件名称。
exclude：指定不需要缓存的组件名称。
max：指定最大缓存组件数量。

示例

<keep-alive include="ComponentA,ComponentB" exclude="ComponentC" max="5">
  <component :is="currentComponent"></component>
</keep-alive>

2. 缓存后的生命周期钩子

当组件被 keep-alive 缓存时，会触发以下生命周期钩子：

activated：组件被激活时调用（从缓存中恢复）。
deactivated：组件被停用时调用（进入缓存）。

示例

export default {
  activated() {
    console.log('组件被激活');
  },
  deactivated() {
    console.log('组件被停用');
  },
};

3. 缓存后如何更新组件

当组件被缓存后，如果需要更新组件的数据或状态，可以通过以下方式实现：

（1）监听路由变化

如果缓存的是路由组件，可以通过监听路由变化来更新组件。

export default {
  watch: {
    '$route'(to, from) {
      if (to.path === '/your-path') {
        this.fetchData(); // 更新数据
      }
    },
  },
  methods: {
    fetchData() {
      // 获取最新数据
    },
  },
};

（2）使用 `activated` 钩子

在 activated 钩子中执行数据更新逻辑。

export default {
  activated() {
    this.fetchData(); // 更新数据
  },
  methods: {
    fetchData() {
      // 获取最新数据
    },
  },
};

（3）手动刷新组件

通过 key 强制刷新组件。

<keep-alive>
  <component :is="currentComponent" :key="componentKey"></component>
</keep-alive>

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
      componentKey: 0,
    };
  },
  methods: {
    refreshComponent() {
      this.componentKey++; // 修改 key 强制刷新组件
    },
  },
};

4. 动态控制缓存

可以通过 include 和 exclude 动态控制哪些组件需要缓存。

示例

<keep-alive :include="cachedComponents">
  <router-view></router-view>
</keep-alive>

export default {
  data() {
    return {
      cachedComponents: ['ComponentA', 'ComponentB'],
    };
  },
  methods: {
    addToCache(componentName) {
      if (!this.cachedComponents.includes(componentName)) {
        this.cachedComponents.push(componentName);
      }
    },
    removeFromCache(componentName) {
      this.cachedComponents = this.cachedComponents.filter(name => name !== componentName);
    },
  },
};