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 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
javascript版2048小游戏
Mar 18 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
js数组去重的hash方法
Dec 22 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
vue - props 声明数组和对象操作
Jul 30 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
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
js面向对象的写法
2016/02/19 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python requests设置代理的方法步骤
2020/02/23 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
什么是唯一索引
2015/07/05 面试题
迟到检讨书5000字
2014/01/31 职场文书
企业内部培训方案
2014/02/04 职场文书
更夫岗位责任制
2014/02/11 职场文书
批评与自我批评材料
2014/02/15 职场文书
奉献演讲稿范文
2014/05/21 职场文书
民族精神月活动总结
2014/08/28 职场文书
机关作风建设工作总结
2014/10/23 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang