Vue中怎么管理的缓存页面

缓存页面如何在合适的时机被销毁(点火电极组件提供了三个参数来动态配置缓存状态,但是作用有限,后面分析)

同一个路径如何缓存多个不同的页面(同页不同参),比如淘宝商品页面继续跳转另一个商品页面

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

本文默认所有页面都是维生

问题一销毁

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

, this.cache =, Object.create (null),//用来缓存vnode 缓存(例子),=祝辞Vnode=,this.keys [],//用来记录已缓存的vnode的关键

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

if (缓存(例子)),{=,vnode.componentInstance 缓存(例子).componentInstance //仅从缓存的vnode中获取vue实例挂在到新的vnode上 　　,//make  current  key 新鲜 　　,删除(键,键) 　　,keys.push(关键) 　　}

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

出自src/核心/组件/维生。js版本init

export  default  { 　　,created  (), {=,,this.cache  Object.create(空) 　　}, 　　,render  (), { 　　,const  childNode =,。美元slots.default [0] 　　,const  cid =childNode.componentOptions.Ctor.cid 　　,if  (this.cache (cid)), { 　　const 才能;child =, childNode.child =, this.cache (cid) .child //直接获取缓存的vnode 　　childNode.elm =,才能这样。el 美元;=,孩子。el美元 　　,}else  { 　　this.cache才能(cid),=childNode 　　,} 　　childNode.data.keepAlive =, true 　　return  childNode 　　}, 　　,beforeDestroy  (), { 　　,for  (const  key  this.cache拷贝),{ 　　this.cache才能摧毁美元[主要].child。() 　　,} 　　,} 　　}

我们需要管理的其实就是缓存和钥匙,维生提供了三个参数来动态管理缓存:

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

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

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

出自src/核心/组件/维生。js

const 名称:,? string =, getComponentName (componentOptions)

所以清除缓存是会无差别的把某个组件的所有实例全部清除,这显然不满足我们的需求。

max的逻辑则是超过最大值时清除栈底的缓存,

出自src/核心/组件/维生。js:

if  (this.max ,,, keys.length 祝辞,方法(this.max)), { 　　,pruneCacheEntry(缓存,键[0],钥匙,this._vnode) 　　}

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

<李>

什么时候销毁

<李>

怎么销毁

1。怎么销毁

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

Vue中怎么管理的缓存页面