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

Vue中内置的<keep-alive>组件可以帮助我们在开发SPA应用时,通过把全部路由页面进行缓存(当然也可以有针对性的缓存部分页面),显著提高页面二次访问速度,但是也给我们在某些场景带来了困扰,其中包含两个主要矛盾:

  1. 缓存页面如何在合适的时机被销毁 (keep-alive组件提供了三个参数来动态配置缓存状态,但是作用有限,后面分析)
  2. 同一个路径如何缓存多个不同的页面(同页不同参),比如淘宝商品页面继续跳转另一个商品页面

本文主要围绕这两个问题探讨,后文用问题一和问题二指代。

本文默认所有页面都是keep-alive

问题一 销毁

当随着业务逻辑变得复杂,路由栈也逐渐升高,理论上用户可以无限的路由下去,不可避免的我们需要管理这些缓存在内存中的页面数据,页面数据包含两部分,Vue实例和对应的Vnode。查看 Vue 源码中src/core/components/keep-alive.js关于缓存的定义

 this.cache = Object.create(null) //用来缓存vnode cache[key] => Vnode
 this.keys = [] //用来记录已缓存的vnode的key

缓存后并不会重用 Vnode,而是只用它上面挂载的 Vue 实例。

if (cache[key]) {
 vnode.componentInstance = cache[key].componentInstance //仅从缓存的vnode中获取vue实例挂在到新的vnode上
 // make current key freshest
 remove(keys, key)
 keys.push(key)
}

为什么不用呢,因为有BUG,最早一版实现里确实是会直接使用缓存的 Vnode。

出自src/core/components/keep-alive.js init version

export default {
 created () {
 this.cache = Object.create(null)
 },
 render () {
 const childNode = this.$slots.default[0]
 const cid = childNode.componentOptions.Ctor.cid
 if (this.cache[cid]) {
  const child = childNode.child = this.cache[cid].child //直接获取缓存的vnode
  childNode.elm = this.$el = child.$el
 } else {
  this.cache[cid] = childNode
 }
 childNode.data.keepAlive = true
 return childNode
 },
 beforeDestroy () {
 for (const key in this.cache) {
  this.cache[key].child.$destroy()
 }
 }
}

我们需要管理的其实就是cache和keys,keep-alive提供了三个参数来动态管理缓存:

include - 只有名称匹配的组件会被缓存。
exclude - 任何名称匹配的组件都不会被缓存。
max - 最多可以缓存多少组件实例。

它们的作用非常简单,源码写的也很简单易读:

所以当我们想要管理这些缓存时,简单的方案就是操作这三个参数,修改include和exclude来缓存或者清除某些缓存,但是需要注意的是它们匹配的是组件的name:

出自src/core/components/keep-alive.js

const name: "htmlcode">
if (this.max && keys.length > parseInt(this.max)) {
 pruneCacheEntry(cache, keys[0], keys, this._vnode)
}

我们要解决问题一,官方提供给的API走不通,我们只能自己来了,我们需要的是解决两个子问题:

  1. 什么时候销毁
  2. 怎么销毁

1. 怎么销毁

先看怎么销毁,如果想销毁一个实例很简单,可以直接用 this.$destroy(), 这样可以吗,不行,这样缓存cache和keys中依旧保留了原来的vnode和key,再次访问时就会出现问题,vnode一直被留存,但是它身上的实例已经被销毁了,这时候在vue的update过程中就会再去创建一个vue实例,也就是说只要某个keep-alive的页面调用过一次this.$destroy(),但是没有清理缓存数组,这个页面之后被重新渲染时就一定会重新创建一个实例,当然重新走全部的生命周期。现象最终就是这个页面就像是没有被缓存一样。

this.$destroy(); //不适合keep-alive组件

所以销毁需要同时清理掉缓存cache和keys,下面定义了一个同时清除缓存的$keepAliveDestroy方法:

 const dtmp = Vue.prototype.$destroy;
 const f = function() {
 if (this.$vnode && this.$vnode.data.keepAlive) {
  if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
  if (this.$vnode.componentOptions) {
   var key = !isDef(this.$vnode.key)
   "htmlcode">
this.$router.push({
 path:"/targer",
 query:{
 stackLevel:Number(this.$route.query.stackLevel) + 1 	
 }
})

这个方案有明显弊端,外部暴露一个参数是非常丑陋且危险的,用户可以随便修改,在进行网页推广时,业务去生产环境自己拷贝到的推广链接也可能带着一个奇怪的 https://xxx.com/foo"htmlcode">

if(target.stack < current.stack){
 current.$keepAliveDestroy();
}

问题二 同页不同参缓存多个实例

可以在源码中看到 src/core/components/keep-alive.js

const key: "htmlcode">
key = Date.now()

1.2 路由栈高度+路径名

key = vm._stack + router.currentRoute.path 这个方案利用当前的栈高度+路径名,为什么需要路径名呢,因为replace的时候栈高度不变,只是路径名变了。

2. 如何把key赋值给页面的vnode

目前有两个方案给vue-router当前的Vnode的key来赋值:

2.1 通过route.query动态绑定Key

这个方案实现比较简单

//绑定key
...
<router-view :key='$route.query.routerKey' />
...


//push时
this.$router.push({
 path:"/foo",
 query:{
 	routerKey: Date.now() //随机key
 }
})

这种方式用起来非常简单有效,但是缺点同样也是会暴露一个奇怪的参数在URL中

2.2 通过获取到Vnode直接赋值

在哪个阶段给Vnode的key赋值呢,答案显而易见,在keep-alive组件render函数进入前, src/core/components/keep-alive.js

...
 render () {
 const slot = this.$slots.default
 const vnode: VNode = getFirstComponentChild(slot)
...

我们可以hack掉keep-alive的render函数,然后在这之前先把slot里的第一个子节点拿到以后,给它的key进行赋值,然后再调用 keep-alive的render:

const tmp = vm.$options.render //vm is keep-alive component instance
vm.$options.render = function() {
 const slot = this.$slots.default;
 const vnode = getFirstComponentChild(slot) // vnode is a keep-alive-component-vnode
 if (historyShouldChange) {
 if (!isDef(vnode.key)) {
  if (isReplace) {
  vnode.key = genKey(router._stack)
  } else if (isPush()) {
  vnode.key = genKey(Number(router._stack) + 1)
  } else {
  vnode.key = genKey(Number(router._stack) - 1)
  }
 }
 } else {
 // when historyShouldChange is false should rerender only, should not create new vm ,use the same vnode.key issue#7
 vnode.key = genKey(router._stack)
 }
 return tmp.apply(this, arguments)
}

总结

通过以上对于问题的分析,我们就解决了自动管理缓存的核心难题。本文是对开源库 vue-router-keep-alive-helper 的一次总结,此库是款简单易用的keep-alive缓存自动化管理工具,从此告别Vue缓存管理难题。如果对你有用,感谢慷慨Star。

演示Demo Sample Code

Bilibili演示视频 感谢三连。

以上就是如何管理Vue中的缓存页面的详细内容,更多关于vue 缓存页面的资料请关注其它相关文章!

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

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

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

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

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