vue 使用 keep-alive 包裹了一个带 tab 切换的瀑布流组件，切换tab后，瀑布流还会请求上一次的接口？

Z时代
2024-03-13
分类：IT

使用 vue2 + vant2 的项目
使用 vant tabs 组件包裹了一个瀑布流组件，切换每个 tab，瀑布流会无限刷新。
现在的问题是，切换完所有 tab 后，再切回第一个 tab，滑动页面，请求的数据还是最后一个被 keep-alive 缓存住的数据。
查了很多资料上说使用 activated() 钩子去清除缓存，重新请求数据。请问要怎么做呢？
我的需求是每次切换 tab，需要保留缓存数据，不能每次都销毁组件再新建。

<van-tabs v-model="active">
    <van-tab
        v-for="(item, index) in list"
        :key="index"
        :title="item.name"
      >
        <keep-alive>
            <component
                v-if="active === index"
                :is="item.componentName"
                :key="'item_' + index"
              />
        </keep-alive>
    </van-tab></van-tabs>

回答：

你可以添加一个activated钩子：


export default {
  // ...
  activated() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 这里添加你的数据请求逻辑
    },
  },};

然后，在你的父组件中，你可以用watch来监听active属性的变化：


export default {
  // ...
  watch: {
    active(newVal, oldVal) {
      // 触发子组件的 fetchData 方法
      this.$refs['item_' + newVal][0].fetchData();
    },
  },
};

你要为每个瀑布流组件添加ref属性：

<keep-alive>
  <component
    v-if="active === index"
    :is="item.componentName"
    :key="'item_' + index"
    :ref="'item_' + index"
  />
</keep-alive>