如何在 Vue 中实现组件的缓存与更新？

缓存组件的方法

在 Vue 中通过 <keep-alive> 组件缓存当前组件：

<template>
  <keep-alive>
    <your-component v-if="shouldCache" /> 
  </keep-alive>
</template>

1. 原理：将组件实例保存在内存中（LRU 策略），避免重复创建。首次渲染执行 created/mounted，后续激活直接复用 DOM
2. 精准控制：
   • include="ComponentA,ComponentB"：只缓存指定组件
   • exclude="ComponentC"：排除特定组件
   • max="5"：限制最大缓存数量

缓存后更新策略

方案一：生命周期钩子（推荐）

export default {
  activated() {  // 组件激活时触发
    this.fetchData()  // 重新拉取数据
    this.scrollToPosition()  // 恢复滚动位置
  },
  deactivated() { // 组件离开时触发
    this.saveScrollPosition()  
  }
}

方案二：强制刷新缓存

通过修改组件的 key 或动态切换缓存状态：

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

<script>
export default {
  methods: {
    refresh() {
      this.excludedComponent = 'YourComponent'  
      this.$nextTick(() => {
        this.excludedComponent = null  // 解除排除后重新缓存新实例
        this.componentKey += 1         // 或通过修改key强制重建
      })
    }
  }
}
</script>

实践建议

1. 必设组件名：组件需定义 name 属性才能被 include/exclude 识别
2. 防过度缓存：避免对高频更新组件使用缓存，易致内存泄漏
3. 路由特殊场景：可通过路由元信息 meta.keepAlive 动态控制缓存