组件缓存的目的:(一般在项目优化这步骤完成)
- 防止组件频繁创建和销毁
- 防止网络请求重复无用执行
步骤
组件缓存, 可以实现组件的状态保持。
结合 vue 内置的 keep-alive 组件,可以实现组件的状态保持。
官方文档地址:https://cn.vuejs.org/v2/api/#keep-alive
-
在App.vue中的router-view外层套上一个keep-alive组件
- 缓存的一级路由页面切换不被释放, 但是首页还是会重新请求数据(因为首页在二级路由中)
-
在Layout.vue中的router-view外层套上一个keep-alive组件
- 这次Home和My页面都被缓存了(二级路由也要管)
-
但发现搜索页面(一级路由下)和详情页面(一级路由下)多被缓存起来了 (多次进入不同的文章, 发现都是同一个文章详情)
-
对router-view使用exclude属性来区别, 哪些页面组件可以缓存
==特别注意exclude里是组件的name名字(跟路由没什么关系)==
<template> <div id="app"> <!-- 一级路由窗口 --> <keep-alive exclude="ArticleIndex,search,UserProfile,favoriteArticle,HistoryAticle,fens" > <router-view></router-view> </keep-alive> </div> </template>
当然你也可以在二级路由上设置exclude
<template>
<div class="layout-container">
<!-- 二级路由出口 -->
<keep-alive exclude="my">
<router-view> </router-view>
</keep-alive>
</div>
</template>
<script>
小结
- 只有被切换销毁的组件, 才需要被缓存
- router-view是他们切换时的挂载点, 套在挂载点外来缓存内部组件
注意点:
组件被缓存,切走了就会失去激活生命周期方法触发 deactivated
无被缓存,切走了,destroyed摧毁生命周期方法触发