keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
2018-01-25 17:27
746 查看
原文来自: http://blog.myweb.kim/vue/keep-alive/?utm-source=origin 转载请注明出处。
在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化’,此时
PS:
最基础的一般是结合动态组件去使用:
不过此种方式并无太大的实用意义。
被包含在
activated
在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。
deactivated
在组件被停用时调用。
注意:只有组件被
有些时候可能需要将整个路由页面一切缓存下来,也就是将
在vue
这样配置路由的路由元信息之后,a路由的
所以为
在vue
。
当使用正则或者是数组时,一定要使用
有了include之后,再与
a52e
的
当匹配条件同时在
包含在
在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化’,此时
<keep-alive>便可以派上用场了。
<keep-alive>可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中。在下一次显示时,也不会重现渲染。
PS:
<keep-alive>与
<transition>相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在
this.$parent中找不到
keep-alive。
1.keep-alive的基础使用
最基础的一般是结合动态组件去使用:1 2 3 4 5 6 7 8 9 10 11 12 | <keep-alive> <component :is="currentView"></component> </keep-alive> new Vue({ el: '#app', data(){ return { currentView: Test //Test为引入的子组件 } } }) |
2.生命周期钩子
被包含在 <keep-alive>中创建的组件,会多出两个生命周期的钩子:
activated与
deactivated
activated
在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。
deactivated
在组件被停用时调用。
注意:只有组件被
keep-alive包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在
2.1.0版本之后,使用
exclude排除之后,就算被包裹在
keep-alive中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。
3.配合router-view使用
有些时候可能需要将整个路由页面一切缓存下来,也就是将 <router-view>进行缓存。这种使用场景还是蛮多的。
在vue
2.1.0之前,大部分是这样实现的:
1 2 3 4 5 6 7 8 9 10 11 1213 | <!-- template --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> //router配置 new Router({ routes: [ { name: 'a', path: '/a', component: A, meta: { keepAlive: true } }, { name: 'b', path: '/b', component: B } ] }) |
$route.meta.keepAlive便为
true,而b路由则为
false。
所以为
true的将被包裹在
keep-alive中,为
false的则在外层。这样a路由便达到了被缓存的效果,如果还有想要缓存的路由,只需要在路由元中加入
keepAlive: true即可。
4.在2.1.0版本之后
在vue 2.1.0版本之后,
keep-alive新加入了两个属性:
include(包含的组件缓存生效) 与
exclude(排除的组件不缓存,优先级大于include)
。
include和
exclude属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
当使用正则或者是数组时,一定要使用
v-bind!
1 2 3 4 5 6 7 8 9 10 11 1213 | <!-- 逗号分隔字符串,只有组件a与b被缓存。这样使用场景变得更有意义了 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- Array (需要使用 v-bind,被包含的都会被缓存) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive> |
router-view一起使用时便方便许多了:
1 2 3 4 | <!-- 一个include解决了,不需要多写一个标签,也不需要在路由元中添加keepAlive了 --> <keep-alive include='a'> <router-view></router-view> </keeo-alive> |
4.需要注意的地方
<keep-alive>先匹配被包含组件
a52e
的
name字段,如果
name不可用,则匹配当前组件
componetns配置中的注册名称。
<keep-alive>不会在函数式组件中正常工作,因为它们没有缓存实例。
当匹配条件同时在
include与
exclude存在时,以
exclude优先级最高(当前vue 2.4.2 version)。比如:包含于排除同时匹配到了组件A,那组件A不会被缓存。
包含在
<keep-alive>中,但符合
exclude,不会调用
activated和
deactivated。
以上,致那颗骚动的心……
相关文章推荐
- 深入理解与使用keep-alive(配合router-view缓存整个路由页面)
- 深入理解vue-router之keep-alive
- 使用vue的时候我们使用keep-alive会将页面缓存的解决方法
- Vue路由开启keep-alive缓存页面
- 路由页面缓存开启 以及 keep-alive 给你埋下的坑
- 深入理解ANGULARUI路由_UI-ROUTER
- 【转】Laravel 深入理解路由和URL生成(使用action方法生成奇葩url的原因)
- UIScrollView和UIPageControl配合使用完成引用介绍页面
- Android的WebView中设置使用缓存将导致重定向页面的404结果不可见
- 深入理解vue路由的使用
- angular2中router路由跳转navigate的使用与刷新页面问题详解
- 深入理解 react-router 路由系统
- 深入理解Spring Redis的使用 (八)、Spring Redis实现 注解 自动缓存
- 深入理解Spring Redis的使用 (八)、Spring Redis实现 注解 自动缓存
- PHP缓存opcode加速之APC配置使用介绍 (深入理解)
- 深入理解ANGULARUI路由_UI-ROUTER
- 深入理解 react-router 路由系统
- iOS--UIScrollView和UIPageControl配合使用完成引用介绍页面
- AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER
- 使用php后台给自己做一个页面路由,配合ajax实现局部刷新。