keep-alive简述

keep-alive作用，使用场景

一.keep-alive的使用场景

在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到 vue 的 keep-alive 技术了

二.keep-alive在项目中的使用

props:

include string或正则，只有名称匹配的组件会被缓存 2.1.0+
exclude string或正则, 名称匹配的组件不会被缓存 2.1.0+
max 最多可以缓存多少组件实例 2.5.0+
activated 和 deactivate 生命周期钩子

include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

activated
在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

deactivated
在组件被停用时调用。

注意：只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。

keep-alive不会在函数式组件中正常工作，因为它们没有缓存实例。

结合router,缓存部分页面