vue项目优化之通过keep-alive数据缓存的方法


Posted in Javascript onDecember 11, 2017

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

prop:

  1. include: 字符串或正则表达式。只有匹配的组件会被缓存。
  2. exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

通过vue提供的keep-alive减少对服务器的请求次数        

VUE2.0中提供了一个keep-alive方法,可以用来缓存组件,避免多次加载相应的组件,减少性能的消耗。比如, 一个页面的数据包括图片、文字等用户都已经加载完了,然后用户通过点击跳转到了另外一个界面。然后从另外一个界面通过返回又回到了原先的界面。如果没有设置的话,那么原先界面的信息就要重新向服务器请求得到。而通过vue提供的keep-alive可以是页面的已经请求的数据得以保存,减少请求的次数,提高用户的体验程度。

缓存组件又分为两种,缓存整个站点的页面的组件或者缓存部分页面的组件。

1、缓存所有的页面,适用于每个页面都有请求的情况。方法如下,在需要缓存的router-view用keep-alive标签进行包裹起来。

<keep-alive>
<router-view></router-view>
</keep-alive>

将首次触发请求写到created钩子里边,就能实现缓存。比如从列表页,去了详情页,回来还是原来的页面。

2、缓存部分组件或者页面,使用router.meta这个属性通过判断的方法可以实现。方法如下:              

<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="! $route.meta.keepAlive">
</router-view>

router设置如下:

routers:[
      {  path: '/home',
        name: home,
        meta:{keepAlive: true}   // 设置为true表示需要缓存,不设置或者false表示不需要缓存                    }
     ]

还可以通过新增的属性include/exclude来设置。见名思意,include包含的意思,exclude除了的意思。这里需要用到组件的名称即name来进行设置,所以name肯定就要加上了。  加入 a,b组件需要缓存,c,d组件不需要缓存。写法如下:

<keep-alive include="a,b">
<component></component>
</keep-alive>   
<keep-alive exclude="c,d">
<component></component>
</keep-alive>

vue项目的优化还可以通过组件的按需加载来实现,就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这样会大大的增加请求的时间,降低用户的体验程度。懒加载在很多的网站都有用到,比如淘宝、京东等等这样的购物网站,上面的图片链接等等都很多,如果你把滚轴迅速的往下拉的时候,你可能会看到图片加载的情况。具体怎么使用,大家可以看另一篇文章: vue项目优化之页面的按需加载(vue+webpack)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS字符串处理实例代码
Aug 05 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 #Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 #Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 #Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 #Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 #Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 #Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 #Javascript
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
原生js写的放大镜效果
2012/08/22 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
安装dbus-python的简要教程
2015/05/05 Python
python字符类型的一些方法小结
2016/05/16 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
python lambda的使用详解
2021/02/26 Python
HTTP状态码详解
2021/03/18 杂记
html5教程画矩形代码分享
2013/12/04 HTML / CSS
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
小学生作文评语大全
2014/04/21 职场文书
党性心得体会
2014/09/03 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
学前班教学反思
2016/02/24 职场文书
Python基础之进程详解
2021/05/21 Python