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中动态添加事件(绑定事件)的代码
Jan 09 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
常用DOM整理
Jun 16 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
微信小程序使用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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
PHP递归算法的简单实例
2019/02/28 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
vue router2.0二级路由的简单使用
2017/07/05 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
python函数的万能参数传参详解
2019/07/26 Python
Python ini文件常用操作方法解析
2020/04/26 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
机械制造与自动化应届生求职信
2013/11/16 职场文书
致裁判员加油稿
2014/02/08 职场文书
团日活动总结书
2014/05/08 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
2016新年问候语大全
2015/11/11 职场文书
python小程序之飘落的银杏
2021/04/17 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis