手写 vue3 keep-alive

Vue3中的`keep-alive`组件用于缓存组件实例，以便在路由切换时重用已渲染的组件，而不是每次都重新创建。这在需要数据持久化或需要避免频繁重新渲染的场景下非常有用。

手写`keep-alive`的基本步骤如下：

1. 安装并引入Vue：

import { createApp, h } from 'vue';

2. 创建一个自定义`KeepAlive`组件：

// keep-alive-custom.js
export default {
  functional: true,
  render(h, { children, props }) {
    const ComponentToCache = children.length === 1
      ? children // 如果只有一个子组件，直接使用
      : null;

    if (props.include || props.exclude) {
      // 如果指定了包含或排除规则，则根据当前组件是否匹配规则决定是否缓存
      let shouldCache = true;
      if (props.include && !props.include(ComponentToCache)) {
        shouldCache = false;
      } else if (props.exclude && props.exclude(ComponentToCache)) {
        shouldCache = false;
      }
      return shouldCache ? h(ComponentToCache) : null;
    }

    return children.length > 1 ? h('div', { key: '__keep-alive' }, children) : null;
  },
};

3. 在Vue应用中使用自定义`KeepAlive`：

// main.js 或 App.vue
import { createApp } from 'vue';
import KeepAliveCustom from './keep-alive-custom.js';

const app = createApp(App);

app.component('keep-alive-custom', KeepAliveCustom);

app.config.globalProperties.$route = new VueRouter(); // 假设你已经配置了路由

app.mount('#app');

// 使用自定义的keep-alive
app.use((router) => {
  router beforeEach((to, from, next) => {
    // 清除已缓存的组件实例，例如在登录/登出后
    router.app.$children.forEach((child) => {
      if (child.$options.name === 'KeepAliveCustom') {
        child.$children.forEach((childChild) => {
          if (childChild.$options.name) {
            childChild.$destroy();
          }
        });
      }
    });

    // 缓存当前路由对应的组件
    const ComponentToCache = router.app.$route.meta.keepAliveComponent || to.component;
    router.app.$nextTick(() => {
      const keepAlive = router.app.$refs['keep-alive-custom'];
      if (keepAlive) {
        keepAlive.renderedChildren.some((child) => {
          if (child.$options.name === ComponentToCache.name) {
            child.$forceUpdate();
            return true;
          }
        });
      }
    });

    next();
  });
});