对keep-alive的理解
keep-alive是什么
KeepAlive 是一个内置组件，允许我们在多个组件之间动态切换时有条件地缓存组件实例。
keep-alive可以设置以下props属性：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max - 数字。最多可以缓存多少组件实例
额外具有的生命周期
当一个组件实例从 DOM 中删除，但它是 缓存的组件树的一部分时，它会进入停用状态，而不是被卸载。当组件实例作为缓存树的一部分插入到 DOM 中时，它就会被激活。
keepnt-alive 组件可以使用 onActivated（） 和 onDeactivated（） 为这两种状态注册生命周期挂钩
使用场景
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive
从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive
思路：
- 在路由中设置keepAlive属性判断是否需要缓存
- 在组件中使用keep-alive