时间:2021-05-18
在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化',此时 <keep-alive> 便可以派上用场了。 <keep-alive> 可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中。在下一次显示时,也不会重现渲染。
PS:<keep-alive> 与 <transition>相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive 。
1. keep-alive的基础使用
最基础的一般是结合动态组件去使用:
<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 之前,大部分是这样实现的:
<!-- template --><keep-alive> <router-view v-if="$router.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$router.meta.keepAlive"></router-view>//router配置new Router({ routes: [ { name: 'a', path: '/a', component: A, meta: { keepAlive: true } }, { name: 'b', path: '/b', component: B } ]})这样配置路由的路由元信息之后,a路由的 $router.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 !
有了include之后,再与 router-view 一起使用时便方便许多了:
<!-- 一个include解决了,不需要多写一个标签,也不需要在路由元中添加keepAlive了 --><keep-alive include='a'> <router-view></router-view></keeo-alive>5. 需要注意的地方
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
分享一句很有用的经验:给router-view加了个keep-alive导致组件缓存了,所以不会触发beforeDestory和destoryed结束!补充知识
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view的整个内容
版权1、外层包围keep-alive作用将组件实例缓存下来2、清除组件缓存使用keep-alive的exclude="组件名"属性补充知识:vue简单的页面刷新
对于web开发和移动端开发,两者在路由上的处理是不同的。对于移动端来说,页面的路由是相当于栈的结构的。vue-router与keep-alive提供的路由体验与
Vue中keep-alive的使用我总结的有两种方式应用:首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件。当组件之间进行相互切