Vue.js使用keep-alive缓存组件属性失效问题求助

首先得明确一个核心点：keep-alive的作用是缓存子组件的实例及其内部状态（比如子组件自己的data、computed值），但它不会直接缓存父组件传递的props——props的值始终由父组件的数据源决定。结合你的代码，我整理了几个关键问题和对应的解决方案：

1. 先修复axios回调的this指向错误（这可能是根本问题） #

看你的axios请求代码，你用了普通函数作为then的回调，导致函数内部的this指向不是Vue实例，所以this.tag、this.clickThroughRatePercentage这些赋值根本没生效到Vue实例的data中！这会让父组件的clickThroughRatePercentage一直是初始值，自然看起来像是keep-alive没缓存属性。

修复方法很简单，换成箭头函数（自动绑定外部的this）：

Axios.get("/app_dev.php/general-benchmark/tags/" + this.$cookies.get("purposeId"))
  .then((response) => { // 这里改成箭头函数
    const tag = response.data.tag;
    this.tag = tag;
    const generalBenchmarkData = tag.generalBenchmark;
    this.clickThroughRatePercentage = Number(
      (generalBenchmarkData.activeCampaignClickThroughRate * 100).toFixed(0)
    );
  });

2. 针对keep-alive缓存props的正确姿势 #

如果修复了this指向后，还是遇到切换组件后props值被重置的问题，你可以根据需求选择以下方案：

方案一：让子组件缓存自身状态 #

既然keep-alive缓存的是子组件实例，我们可以在benchmark-cards内部把props的值存到自己的data里，用这个缓存的data值来渲染：

<template>
  <div class="card-header">
    <h3 class="display-2 ctr">
      {{ cachedAvgClickRate }}<span class="percentage avg-ctr-percentage">%</span>
    </h3>
  </div>
</template>

<script>
export default {
  props: ["avgClickRate", "avgProjectWaste", "avgQualityScore"],
  data() {
    return {
      cachedAvgClickRate: this.avgClickRate,
      cachedAvgProjectWaste: this.avgProjectWaste,
      cachedAvgQualityScore: this.avgQualityScore,
    };
  },
  // 组件从缓存中被激活时，可选择是否同步父组件最新的props
  activated() {
    // 如果需要同步父组件的最新值，就打开下面的注释；如果要保留缓存值，就去掉
    // this.cachedAvgClickRate = this.avgClickRate;
    // this.cachedAvgProjectWaste = this.avgProjectWaste;
    // this.cachedAvgQualityScore = this.avgQualityScore;
  },
  // 可选：监听props变化，实时更新缓存
  watch: {
    avgClickRate(newVal) {
      this.cachedAvgClickRate = newVal;
    },
    avgProjectWaste(newVal) {
      this.cachedAvgProjectWaste = newVal;
    },
    avgQualityScore(newVal) {
      this.cachedAvgQualityScore = newVal;
    },
  },
};
</script>

这样，当组件被keep-alive缓存时，子组件的cachedXXX数据会被保留，不会随父组件的props变化而自动更新（除非你开启了watch或activated里的同步逻辑）。

方案二：缓存父组件的数据源 #

如果父组件本身会被销毁重建（比如路由切换），导致clickThroughRatePercentage等变量被重置，那可以把这些数据存到更持久的地方：

• 使用Vuex管理全局状态，让数据在页面刷新或组件切换时不会丢失；
• 将数据存入sessionStorage/localStorage，在父组件created钩子中先读取缓存，再决定是否重新请求接口：

created() {
  // 先读取缓存
  const cachedRate = sessionStorage.getItem('clickThroughRatePercentage');
  if (cachedRate) {
    this.clickThroughRatePercentage = Number(cachedRate);
  } else {
    // 没有缓存时再请求接口
    Axios.get("/app_dev.php/general-benchmark/tags/" + this.$cookies.get("purposeId"))
      .then((response) => {
        const tag = response.data.tag;
        const generalBenchmarkData = tag.generalBenchmark;
        this.clickThroughRatePercentage = Number(
          (generalBenchmarkData.activeCampaignClickThroughRate * 100).toFixed(0)
        );
        // 存入缓存
        sessionStorage.setItem('clickThroughRatePercentage', this.clickThroughRatePercentage);
      });
  }
}

方案三：确保keep-alive的使用正确 #

• 确认benchmark-cards没有被v-if等条件渲染指令包裹，否则条件不满足时组件会被销毁，keep-alive无法缓存；
• 如果父组件是路由组件，需要把keep-alive包裹在<router-view>外层，确保父组件也被缓存：

<keep-alive>
  <router-view /> <!-- 这里渲染父组件，其内部的benchmark-cards也会被间接缓存 -->
</keep-alive>

内容的提问来源于stack exchange，提问作者Sireini