vue keep-alive
1.基本用法
vue2.0提供了一个keep-alive组件
用来缓存组件,避免多次加载相应的组件,减少性能消耗
<keep-alive>
<component>
<!-- 组件将被缓存 -->
</component>
</keep-alive>
有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下
<keep-alive><router-view></router-view></keep-alive>
将首次触发请求写在created钩子函数中,就能实现缓存,
比如列表页,去了详情页 回来,还是在原来的页面。
2.缓存部分页面或者组件
(1)使用router. meta属性
// 这是目前用的比较多的方式
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
router设置
...
routes: [
{ path: '/', redirect: '/index', component: Index, meta: { keepAlive: true }},
{
path: '/common',
component: TestParent,
children: [
{ path: '/test2', component: Test2, meta: { keepAlive: true } }
]
}
....
// 表示index和test2都使用keep-alive
(2).使用新增属性inlcude/exclude
2.1.0后提供了include/exclude两个属性 可以针对性缓存相应的组件
<!-- comma-delimited string --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- regex (use v-bind) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> //其中a,b是组件的name
注意:这种方法都是预先知道组件的名称的
(3)动态判断
<keep-alive :include="includedComponents"> <router-view></router-view> </keep-alive>
includedComponents动态设置即可
如果只想 router-view 里面某个组件被缓存，怎么办？
- 使用 include/exclude
- 增加 router.meta 属性
使用 include/exclude
// 组件 a
export default {
name: 'a',
data () {
return {}
}
}
<keep-alive include="a">
<router-view>
<!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
</router-view>
</keep-alive>
exclude 例子类似
缺点：需要知道组件的 name，项目复杂的时候不是很好的选择
【加盐】使用 router.meta 拓展
假设这里有 3 个路由： A、B、C。
需求：
-
- 默认显示 A
- B 跳到 A，A 不刷新
- C 跳到 A，A 刷新
实现方式：
在 A 路由里面设置 meta 属性：
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 需要被缓存
}
}
在 B 组件里面设置 beforeRouteLeave：
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // 让 A 缓存，即不刷新
next();
}
};
在 C 组件里面设置 beforeRouteLeave：
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // 让 A 不缓存，即刷新
next();
}
};
这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。
keep-alive生命周期钩子函数：activated、deactivated
使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。
问题描述
在业务开发中，会有路由跳转但是返回需要保留数据的场景；vue 中提供了 keep-alive 来处理
解决方案
返回dom不让其重新刷新，在vue-view外面包一层, 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中；
可以将 是否包裹 keep-alive 通过参数配置；
|
1
2
3
4
5
6
|
<keep-alive> <router-view v-if="$route.meta.keepAlive" style="min-height:100%"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive" style="min-height:100%"></router-view>//不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 这个路由则显示在上面标签；//需要刷新的路由配置里面配置 meta: {keepAlive: false}, 这个路由则显示在下面标签； |
总结
路由大法不错，不需要关心哪个页面跳转过来的，只要 router.go(-1) 就能回去，不需要额外参数。
然而在非单页应用的时候，keep-alive 并不能有效的缓存了= =
推荐文章：https://juejin.im/post/5b610da4e51d45195c07720d#heading-5
