DDR爱好者之家

vue项目优化之通过keep-alive数据缓存的方法
站长资源 2025/1/12 佚名
33 1538
DDR爱好者之家 Design By 杰米

<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)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米