189 8069 5689

keep-alive组件怎么在vue项目中使用

keep-alive组件怎么在vue项目中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联建站是一家集网站建设,壶关企业网站建设,壶关品牌网站建设,网站定制,壶关网站建设报价,网络营销,网络优化,壶关网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

vuex里获取列表数据:
GET_COLLECTION_LIST(state, val) { state.collectionList = state.collectionList.concat(val)}

歌曲列表里created获取数据,mounted监听滚动事件滚动加载,destroyed取消监听:
created(){ this.collectionListMethod({limit: this.limit, offset: this.offset})},
mounted(){ window.addEventListener('scroll', this.isScrollBot)}
destroyed(){ window.removeEventListener('scroll', this.isScrollBot)}

专辑列表页返回使用的是 this.$router.go(-1)

有问题就要解决问题,通过查询了解到keep-alive可以对数据进行缓存,路由切换的时候可以使用缓存不用重新触发接口请求,貌似可以很完美解决问题,实践出真知,在代码里添加:

首先在歌曲列表路由里添加meta:{keepAlive: true}为后面的router-view是否需要缓存提供标识
{ path: '/songLis', component: SongLis, meta: { keepAlive: true }}
然后在router-view外层添加keep-alive,并根据meta参数判断是否所有路由都需要缓存

  

添加完毕,回到页面看效果!可喜可贺的是控制台不报错了,说明keep-alive起作用了,撒花庆祝~~~ 但是事情并没有那么简单,当我们从专辑列表切到其他路由,滚动鼠标会发现滚动加载的监听事件没有取消,组件destroyed的时候明明取消监听了啊!而且再切回到专辑列表页的时候,滚动加载反而不执行了,表示一脸懵~

经过查看vue文档,发现文档有这么一句话:

包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

也就是说使用keep-alive的组件不会触发destroyed钩子方法,这就是取消监听失败的原因。根据文档介绍,keep-alive切换时,会触发自己的activeted和deactiveted两个钩子函数,可以理解为vue的created和destroyed两个钩子,因此需要修改代码,在deactivated时候取消监听,同时在activated的时候恢复监听,否则切回去的时候滚动监听也不会有效果:

//keep-alive钩子函数,组件恢复时触发
activated(){ window.addEventListener('scroll', this.isScrollBot)},
//keep-alive钩子函数,组件变为不可用时触发
deactivated(){ window.removeEventListener('scroll', this.isScrollBot)}

修改后的效果完全符合预期,切换路由页面保留当位置,不会重复请求接口而且也不会在专辑列表组件外部触发滚动加载。

二、关于keep-alive

既然用到了keep-alive,就通过文档简单总结下相关使用:

上面已经说过,通过keep-alive包裹的组件,在不活动时会缓存组件实例,不会对组件进行销毁,再次处于活动状态时,会读取缓存的内容并保存组件状态,不用重复请求接口获取数据。

(1)最基本使用基本用法:

基本用法:

 


也可以根据条件判断:

  1">
 

这个时候触发两个组件切换时,组件内的数据和状态都会得到保存,如果有input输入框,输入框内容会保留

(2)有条件的缓存

keep-alive提供了include、exclude、max三个参数,前两个允许组件有条件的进行缓存,两者都可以接受字符串、正则、数组形式;max表示最多可以缓存多少个组件,接受一个number类型。


 

此时只有a、b两个组件会触发keep-alive,此处的名字是组件内部name对应名字,如果name不存在,会查找父组件里components里注册的名字,如果也不存在则不会匹配。
正则和数组方法同上,但是需要用v-bind:include=''方式。


 

(3)钩子函数

两个钩子函数activated和deactivated,上面已经说过,分别在组件恢复活动状态和组件失去活动状态时触发,可以起到类似created和destroyed钩子作用。

看完上述内容,你们掌握keep-alive组件怎么在vue项目中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


本文题目:keep-alive组件怎么在vue项目中使用
标题URL:http://cdxtjz.com/article/jpjsch.html

其他资讯