vue中keep-alive组件的入门使用教程


Posted in Javascript onJune 06, 2019

一、问题触发并解决

最近自己在写vue练习,内容相对简单,主要是对vue进行熟悉和相关问题发现,查漏补缺。简单说下练习的项目内容及问题的产生:

练习使用的vue-cli 2.0脚手架搭建,内容就是简单的仿音乐播放app,功能也相对简单,大体就是单页router切换各个专辑列表,点击进入专辑内容页面,单击歌曲名称可以进行播放、暂停、下一曲功能。

简单的背景介绍完了,说下问题产生的情形:在从整个歌曲列表页点击跳转到单个专辑列表页,然后点击返回按钮返回歌曲列表页时,页面保存了之前的浏览位置,但是接口重新请求了数据,因为歌曲列表页有滚动加载效果,所以数据获取在vuex里用了数组的concat方法,导致返回请求的数据重新加载了列表里,而v-for循环由于key值有了重复,导致控制台报错;说起来可能比较难懂,上一些基本的代码部分:

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>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>

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

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

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

也就是说使用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)最基本使用基本用法:

基本用法:
<keep-alive>
 <component :is="view"></component>
</keep-alive>

也可以根据条件判断:
<keep-alive>
 <comp-a v-if="a > 1"></comp-a>
 <comp-b v-else></comp-b>
</keep-alive>
这个时候触发两个组件切换时,组件内的数据和状态都会得到保存,如果有input输入框,输入框内容会保留

(2)有条件的缓存

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

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

<keep-alive :max="10">
 <component :is="view"></component>
</keep-alive>

(3)钩子函数

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

以上是对keep-alive的个人使用和理解,如有不足还望指正~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
vue的传参方式汇总和router使用技巧
May 22 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
vue2配置scss的方法步骤
Jun 06 #Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 #Javascript
详解Vue 如何监听Array的变化
Jun 06 #Javascript
js常见遍历操作小结
Jun 06 #Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 #Javascript
vue中的过滤器实例代码详解
Jun 06 #Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 #Javascript
You might like
天津市收音机工业发展史
2021/03/04 无线电
PHP5中MVC结构学习
2006/10/09 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
php数组指针操作详解
2017/02/14 PHP
json简单介绍
2008/06/10 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
vue中div禁止点击事件的实现
2022/04/02 Vue.js