Vue keepalive学习用法及场景分析

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

<keep-alive :include="/Component[A-Z]/">
  <component :is="currentComponent"></component>
</keep-alive>

<keep-alive :include="['ComponentA', 'ComponentB']">
  <component :is="currentComponent"></component>
</keep-alive>

// 路由配置
const routes = [
  { path: '/pageA', component: PageA, meta: { keepAlive: true } },
  { path: '/pageB', component: PageB, meta: { keepAlive: false } }
];
// 动态include
<keep-alive :include="cachedComponents">
  <router-view></router-view>
</keep-alive>
computed: {
  cachedComponents() {
    return this.$route.matched
      .filter(route => route.meta.keepAlive)
      .map(route => route.name);
  }
}

<keep-alive include="A,B" exclude="B">
  <component :is="currentComponent"></component>
</keep-alive>

export default {
  activated() {
    console.log('组件被激活');
    this.fetchData(); // 刷新数据
    this.initTimer(); // 重启定时器
  },
};

export default {
  deactivated() {
    console.log('组件被停用');
    clearInterval(this.timer); // 清除定时器
    this.saveScrollPosition(); // 保存滚动位置
  },
};

export default {
  data() {
    return { scrollY: 0 };
  },
  activated() {
    // 恢复滚动位置
    window.scrollTo(0, this.scrollY);
  },
  deactivated() {
    // 保存滚动位置
    this.scrollY = window.scrollY;
  },
};

export default {
  data() {
    return { page: 1, loading: false };
  },
  activated() {
    if (!this.loading) {
      this.fetchMoreData(); // 刷新数据
    }
  },
};