本文主要是介绍vue利用缓存减少请求次数，提高访问速度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原文：https://blog.csdn.net/qq_40963664/article/details/80062130
利用keep-alive 缓存需要缓存的页面
在app.vue中改写router-view
<keep-alive><router-view><!-- 这里是会被缓存的视图组件，比如 page1,page2 --></router-view>
</keep-alive>在router/index.js中添加路由元信息，设置需要缓存的页面
routes: [{path: '/',name: 'index',component: index,meta: {keepAlive: true, //此组件需要被缓存}},{path: '/page1',name: 'page1',component: page1,meta: {keepAlive: true, //此组件需要被缓存}},{path: '/page2',name: 'page2',component: page2,meta: {keepAlive: true, // 此组件需要被缓存}},{path: '/page3',name: 'page3',component: page3,meta: {keepAlive: true, // 此组件需要被缓存}}
]钩子函数的执行顺序
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。我们可以利用不同的钩子函数，做不同的事。务必理解上述钩子函数的执行时机和执行顺序，本教程的核心就依赖于此钩子函数
activated和deactivated是使用keep-alive后，vue中比较重要的两个钩子函数，建议详细了解下。
在组件中，主要是在activated钩子函数中判断是否使用缓存
activated() {//使用缓存，直接跳过if(不需要缓存，则执行相应逻辑){}},
这篇关于vue利用缓存减少请求次数，提高访问速度的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
