keep-alive

keep-alive 是什么

1. keep-alive 是 vue 的内置组件，它自身不会渲染成一个 DOM，也不会出现在父组件链中，
2. 使用 keep-alive 包裹的组件会有activated和deactivated两个事件；activated：组件激活时调用，deactivated：组件停用时调用，这两个钩子在服务器端渲染期间不被调用
3. 不使用 keep-alive：生命周期钩子(beforeRouteEnter --> created --> mounted --> destroyed)
4. 使用 keep-alive：生命周期钩子(beforeRouteEnter --> created --> mounted --> activated --> deactivated)，再次进入的生命周期（beforeRouteEnter -->activated --> deactivated）

keep-alive 的 props

1. include ,值为字符串、正则、数组，匹配到的会被缓存
2. exclude，值为字符串，正则，数组，匹配到的不会被缓存
3. max，值为数组，最多可以缓存多少组件

<keep-alive include="a,b"><component /></keep-alive>
<keep-alive include="/a|b/"><component /></keep-alive>
<keep-alive include="['a','v']"><component /></keep-alive>

router-view 与 keep-alive 的使用（前进刷新，后退不刷新）

• 方法一：keep-alive

  demo 地址

• 方法二

  子路由层级比父路由高，既保证了返回不刷新，前进刷新，也可以记住父路由的滚动位置，但是子路由的页面因为设置了 z-index(只有定位元素设置 z-index 才有效)，所以页面的滚动会有问题，一般推荐第三方库解决，我一般使用better-scroll

参考

在动态组件上使用 keep-alive

选项 / 生命周期钩子|