keep-alive

keep-alive是什么

keep-alive是vue的内置组件，用于包裹动态组件，当动态组件不活动时，并不会销毁而是保存它。

它自身不会渲染成一个dom组件，也不会存在父组件链中。

作用

当切换组件时，被切换的组件会缓存在内存中，并不是销毁，防止重复渲染，减少了时间和性能消耗，提升了用户的体验性

参数

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例

使用keep-alive之后会生成两个钩子函数

activated（在组件激活时调用）和deactivated（在组件切换时调用）

比如正常情况下我在一个商城页面的首页中间的部分跳到列表页，我如果想返回首页，那么我会直接回到顶部去。如果我用keep-alive包裹组件的话，在组件离开首页的时候，获取到scroll-top的值并把它保留下来，在回到首页的时候，给首页附上保留的值，那么我返回的时候就能回到离开时的位置