持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情
初识keep-alive
keep-alive是一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
三个属性
include/exclude:允许组件有条件地缓存。这两个参数都可以用逗号分隔字符串、正则表达式或一个数组来表示。max:用于定义组件最大的缓存个数。如果超过了这个个数，就会使用LRU置换策略，删除最近最久未被访问过的实例。
生命周期
- 初次进入： 触发created>mounted>activated 退出：触发deactivated
- 二次进入： 触发activated
因此在平时开发中，可以利用activated/deactivated这两个生命周期来得知组件是否处于活跃状态，编写业务代码。
基本用法
动态组件
<keep-alive>
<component :is="view"></component>
</keep-alive>
路由组件
<keep-alive>
<router-view></router-view>
</keep-alive>
业务场景
场景：假设A为首页，B为列表页，C为详情页，需求为：在详情页返回列表页时，希望缓存B页面，如列表页中用户搜索的内容或筛选列表、滚动条的位置均被缓存，如果由列表B页面返回到首页，则需要将B的缓存页清空。
思路： 当A页面跳转到B页面时 ，可以使用路由钩子函数beforeRouterEnter,将B页面组件名称写入到白名单include中。 当B页面返回A页面时，可以用过路由钩子函数onBeforeRouterLeave，移除B页面被缓存的组件名称。 当B页面跳转至C页面时，通过组件钩子函数onDeactivated函数记录滚动条信息等。 当C页面返回B页面时，通过组件钩子函数onActivated将滚动条信息重新赋值。
