vue3的页面缓存的实现方案

Vue 作为当今流行的前端框架之一，在实现页面缓存方面也有多种方式可供选择。本文将重点介绍 Vue3 中除了 keep-alive 组件之外，还有使用路由元信息、路由状态和浏览器历史记录 API 实现页面缓存的方案，以及它们针对实际需求的优缺点分析和应用场景。

需求场景

在实际开发中，我们常常会有这样一个需求：在列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。这个需求在页面性能和用户体验优化中相当常见，而且在不同的场景下可能会有着不同的实现方式。

keep-alive 组件的使用

Vue3 中最常见的实现页面缓存的方式就是使用 keep-alive 组件。它可以将组件进行缓存，保留组件状态和数据，从而在组件的销毁和再次渲染之间保持状态的稳定。

keep-alive 的基本使用方式如下：

<keep-alive>
  <router-view></router-view>
</keep-alive>

这将会将路由视图中渲染的所有组件包装在一个缓存容器中，并在路由切换时不同的缓存策略来影响缓存过程。缓存策略可以通过 include 和 exclude 属性进行设置，如：

<keep-alive :include="['Home', 'List']" :exclude="['Detail']">
  <router-view></router-view>
</keep-alive>

这将会缓存 Home 和 List 两个组件，并排除 Detail 组件。

那么对于我们的需求场景，如何应用 keep-alive 组件呢？可以通过如下的方式实现：

<keep-alive>
  <router-view :key="$route.fullPath"></router-view>
</keep-alive>

这里通过给 router-view 组件加上 key 属性来触发 keep-alive 的缓存机制。当从列表页进入详情页并返回时，列表页的组件状态和数据将被保留。而当从首页进入列表页时，则会重新加载组件，从而达到我们的需求。

keep-alive 的优点在于使用简单易懂，可以针对每个路由组件进行缓存设置，并且可以灵活控制缓存的策略。但是它也存在一些缺点：首先是由于它仅仅缓存组件状态和数据，所以无法适应一些更加复杂的需求，比如需要缓存页面的位置、滚动条位置等。其次，如果页面嵌套层级比较深，缓存策略的设置也可能会变得相对复杂并且容易出现缓存冲突的问题。

路由元信息和路由状态的使用

除了 keep-alive 组件，Vue3 还支持使用路由元信息和路由状态来实现对页面的缓存控制。

路由元信息（route meta）是指在路由配置中添加的一些自定义信息，例如页面标题、权限等。在 Vue3 中，我们可以结合路由元信息来实现页面缓存的控制。具体的实现步骤如下：

1. 在路由配置中，为列表页添加一个标记，如 isFromHome: true：

{
  path: '/list',
  component: List,
  meta: {
    isFromHome: true
  }
}

2. 在详情页中，通过 router.back() 方法回到列表页时，根据路由元信息和路由状态以及路由的 from 和 to 属性判断是否需要进行缓存：

import { ref, onBeforeRouteLeave } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const cache = ref({});

    onBeforeRouteLeave((to, from) => {
      // 当从详情页返回列表页时，检查是否需要缓存
      if (from?.meta?.isFromHome && !to?.state?.refresh) {
        cache.value = {...cache.value, [from.path]: true};
      }
    });

    // 切换到列表页时，根据缓存控制是否重新加载数据
    const gotoList = () => {
      const path = '/list';
      if (cache.value[path]) {
        router.push({name: 'List', replace: true, state: {refresh: false}});
      } else {
        router.push({name: 'List', replace: true, state: {refresh: true}});
      }
    }

    return {
      cache,
      gotoList
    }
  }
}

3. 在列表页中，根据路由状态来控制是否需要重新加载数据：

import { ref, onMounted, onBeforeRouteUpdate } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const shouldRefresh = ref(true);

    onMounted(() => {
      loadData();
    });

    onBeforeRouteUpdate((to, from, next) => {
      // 当从详情页返回列表页时，通过路由状态控制是否需要重新加载数据
      if (to?.state?.refresh !== undefined) {
        shouldRefresh.value = to.state.refresh;
      }
      next();
    });

    const loadData = () => {
      if (shouldRefresh.value) {
        // 重新加载数据
      } else {
        // 从缓存中读取数据
      }
    }

    return {
      shouldRefresh,
      loadData
    }
  }
}

在这个方案中，我们使用路由元信息来判断是否需要进行缓存，使用路由状态来控制是否需要重新渲染组件。这样可以更加灵活地控制缓存，并能够适应更加复杂的需求场景。

但是这种方式也有缺点，例如使用路由元信息和路由状态进行缓存控制比较麻烦，并且需要在多个组件之间传递状态；同时由于这里并没有使用 keep-alive 缓存组件，所以不太适用于需要保留组件状态和数据的场景。

浏览器历史记录 API 的使用

另外一个可行的方案是使用浏览器的历史记录 API（history API）来实现页面缓存。

具体实现方式如下：

1. 在列表页进入详情页时，通过 history.pushState 将列表页状态保存到历史记录中：

const state = { cached: true, scrollTop: window.scrollY };
history.pushState(state, document.title, window.location.href);

2. 在详情页中，通过 history.replaceState 修改列表页状态：

history.replaceState({ ...history.state, cached: true }, document.title, window.location.href);

3. 在列表页中的 created 生命周期中，通过监听 popstate 事件来判断是否需要重新加载数据：

created() {
  window.addEventListener('popstate', this.handlePopState);
},

handlePopState(event) {
  const state = event.state || {};
  if (state.cached) {
    // 使用缓存数据
  } else {
    // 加载新数据
  }
}

在这个方案中，我们直接使用了浏览器的历史记录 API，通过 history.pushState 和 history.replaceState 方法来保存和修改页面状态，并通过 window.popstate 事件来判断是否需要重新加载数据。

这种方式相对于其他方案来说，需要使用原生的 browser history API 来实现，而且需要手动保存和修改页面状态，在实现上相对来说有一些难度。但是它可以有效地缓存页面，同时也能够在浏览器的前进后退操作中保存状态，从而提升了用户体验。

总结

在页面缓存的实现方面，Vue3 中有多种可选择的方案。除了常见的使用 keep-alive 组件之外，还可以使用路由元信息和路由状态来实现对页面的缓存控制，或者直接使用浏览器的历史记录 API 来实现缓存。这些方案各有优缺点，在具体应用中需要按照需求进行综合考虑。

总的来说，keep-alive 组件作为 Vue3 中最常见的缓存方案，适用于简单的组件缓存需求。而使用路由元信息和路由状态、浏览器历史记录 API 等相对灵活的方案则适用于更加复杂的需求场景。我们需要根据具体情况来选择相应的实现方案，以提升页面性能和用户体验。