Vue实现按需动态keep-alive

一、场景描述

项目中常见的一个场景是：

主页->列表页->详情页层层深入，详情页->列表页->主页层层返回。

为了提升用户体验和性能，我们希望可以动态缓存列表页面：

从详情页->列表页时，用缓存中的列表页，不用重新请求数据。

从列表页->主页时，注销掉列表页，再进入列表页时，获取最新的数据。

现在，我们用keep-alive来实现这个功能。

二、keep-alive知识回顾

官方文档这样介绍keep-alive

keep-alive

• Props：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

  • max - 数字。最多可以缓存多少组件实例。

• 用法：

  <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

  当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated<