keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 。
应用场景：跳转到详情页面时，需要保持列表页的滚动条的位置，返回的时候依然在这个位置，这样可以提高用户体验

特征

• 一般结合路由和动态组件一起使用，用于缓存组件；
• 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
• 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。
• 设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）

语法

// 基础用法，要求同时只有一个子元素被渲染
<keep-alive>
  <component :is="view">component>
keep-alive>
// 和transition一起使用
<transition>
  <keep-alive>
    <component :is="view">component>
  keep-alive>
transition>

可以接受三个参数

• include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
• exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
• max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

钩子函数

1、不使用keep-alive的生命周期函数：
beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

2、使用后：

• 初次加载：beforeRouteEnter->beforeCreate -> created -> beforeMount -> mounted -> … ->beforeRouteLeave -> deactivated（数据会被存放在内存中，所以不执行destory等函数）
• 再次加载时：beforeRouteEnter->activated-> … … -> beforeRouteLeave-> deactivated

原理

keep-alive 缓存机制便是根据LRU策略来设置缓存组件新鲜度，将很久未访问的组件从缓存中删除