vue使用keep-alive缓存页面优化项目(1)，web开发学习路线

正常生命周期：beforeRouteEnter --> created --> mounted --> updated -->destroyed

使用keepAlive后生命周期：

首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次进入缓存页面：beforeRouteEnter --> activated --> deactivated

注：

1、这里的activated非常有用，因为页面被缓存时，created,mounted等生命周期均失效，你若想进行一些操作，那么可以在activated内完成(下面会举个栗子：列表页回到上次浏览位置)

2、activated keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用。

3、deactivated keep-alive组件停用时调用，该钩子在服务端渲染期间不被调用。

缓存整个项目

在 App.vue 里面

如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：

使用keepAlive后生命周期发生了哪些变化

结合Router，缓存部分页面

1、在App.vue中设置：（根据是否需要缓存切换模式）

2、在router.js路由页设置：

new Router({