修改vue源码实现动态路由缓存的方法

2023-08-02 17:30:03 70

动态路由

官网解读：我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在vue-router的路由路径中使用“动态路径参数”(dynamicsegment)来达到这个效果。

即如果你有一个盘点录入单路由，但你想通过不同的传不同的ID来加载CheckInputInfo这个组件，若采用params方式，这时只需要在path后面配置/:taskId即可实现CheckInputInfo/1和CheckInputInfo/2这样的路由，同时可以通过this.$route.params.taskId来获取当前路由的taskId。

{
path:'CheckInputInfo/:taskId',
meta:{
title:'盘点录入单'
},
name:'CheckInputInfo',
component:()=>import('@/view/Check/CheckInputInfo.vue')
}

类似的，同样也可使用query方式，这时只需要在path后面配置:taskId即可实现CheckInputInfo?taskId=1和CheckInputInfo?taskId=2这样的路由,同时可以通过this.＄route.query.taskId来获取当前路由的taskId。

{
path:'CheckInputInfo:taskId',
meta:{
title:'盘点录入单'
},
name:'CheckInputInfo',
component:()=>import('@/view/Check/CheckInputInfo.vue')
}

vue-router通过配置params和query来实现动态路由，并可通过this.＄route.xx来获取当前的params或query，省去了直接操作或处理window.location，还是挺方便的。

注意：当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

解读：在不使用keep-alive的情况下，我们每次加载路由，这时会重新render当前路由挂载的component，但若这两个路由是同一个路由组件配置的动态路由，vue为了性能设计了不会重新render。

这显然不符合我们的预期，那么该如何在动态路由下拥有完整的生命周期呢？答案是keep-alive。

keep-alive

官网解读：keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition相似，keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。在2.2.0及其更高版本中，activated和deactivated将会在树内的所有嵌套组件中触发。当组件在内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。

keep-alive通过缓存Vnode的方式解决了SPA最为关键的性能问题。以下，我就按步骤来分析以下：

一、路由触发路由组件重新render的问题

1、不缓存模式：

每次切换都会重新render，执行整个生命周期，每次切换时，重新render，重新请求，，必然不满足需求。

2、缓存模式：

只是在进入当前路由的第一次render，来回切换不会重新执行生命周期，且能缓存router-view的数据。

二、router-view数据缓存问题

keep-alive采用render函数来创建Vnode，一下是vuev2.5.10的keep-alive.js的render()：

render(){
constslot=this.$slots.default
constvnode:VNode=getFirstComponentChild(slot)
constcomponentOptions:?VNodeComponentOptions=vnode&&vnode.componentOptions
if(componentOptions){
//checkpattern
constname:?string=getComponentName(componentOptions)
const{include,exclude}=this
if(
//notincluded
(include&&(!name||!matches(include,name)))||
//excluded
(exclude&&name&&matches(exclude,name))
){
returnvnode
}

const{cache,keys}=this
constkey:?string=vnode.key==null
//sameconstructormaygetregisteredasdifferentlocalcomponents
//socidaloneisnotenough(#3269)
?componentOptions.Ctor.cid+(componentOptions.tag?`::${componentOptions.tag}`:'')
:vnode.key
if(cache[key]){
vnode.componentInstance=cache[key].componentInstance
//makecurrentkeyfreshest
remove(keys,key)
keys.push(key)
}else{
cache[key]=vnode
keys.push(key)
//pruneoldestentry
if(this.max&&keys.length>parseInt(this.max)){
pruneCacheEntry(cache,keys[0],keys,this._vnode)
}
}

vnode.data.keepAlive=true
}
returnvnode||(slot&&slot[0])
}
}

在render是获取到Vnode，若cache[key]存在，则:

vnode.componentInstance=cache[key].componentInstance

否则，将Vnode保存在cache里：

cache[key]=vnode

于是当时用keep-alive时，我们就可以保存每个route-view的数据。

动态路由缓存问题及如何实现

一、bug表象

最开始其实是不知道这个bug的，也是通过现象反推，然后由源码解决这个问题的，那就先从现象说起：

动态路由缓存的的具体表现在：

由动态路由配置的路由只能缓存一份数据。keep-alive动态路由只有第一个会有完整的生命周期，之后的路由只会触发actived和deactivated这两个钩子。一旦更改动态路由的某个路由数据，期所有同路由下的动态路由数据都会同步更新。

我们的期望其实是在使用keep-alive的情况下，动态路由能有非动态的表现，即拥有完整的生命周期、各自的数据缓存。

二、发掘问题关键

入手keep-alive源码发现，其实问题就出现在这一步：

if(
//notincluded
(include&&(!name||!matches(include,name)))||
//excluded
(exclude&&name&&matches(exclude,name))
){
returnvnode
}

通过上面的表象其实可以探究出，router-view其实是已经缓存了，而且一个动态路由的router-view都是通过了if判断返回了Vnode。那么再看一下这个name是什么：

functiongetComponentName(opts:?VNodeComponentOptions):?string{
returnopts&&(opts.Ctor.options.name||opts.tag)
}
constname:?string=getComponentName(componentOptions)

这里的opts其实对应的就是VueComponent的＄options，而this.＄options.name不就是对应着得.vue文件里声明的name属性。然后又想到，怪不得配置路由的时候要求提供的name属性要和组件内部的name值保持一致。

看到这里，问题已经水落石出了，因为动态路由配置的组件相同，getComponentName每次返回相同name，然后render()去缓存了相同的Vnode，且只能缓存了一份。既然如此，只要能正确的缓存Vnode和取出Vnode，动态路由情况下，keep-alive依然能正常运行。

修改Vue源码

上面说到了是因为动态路由组件名的问题，如果将缓存的key设置为唯一不就行了吗？

于是在router-view上配置key，key取得师path，永远唯一：

然后修改keep-alive.js源码，如下（因为放假的关系不详细说了，直接贴源码，实现的人就是我，也是第一个，github上此BUG目前还是open状态）:

/*
*@flow
*modifybyLK20190624
*/

import{isRegExp,remove}from'shared/util'
import{getFirstComponentChild}from'core/vdom/helpers/index'

typeVNodeCache={[key:string]:?VNode};

functiongetComponentName(opts:?VNodeComponentOptions):?string{
returnopts&&(opts.Ctor.options.name||opts.tag)
}

functionmatches(pattern:string|RegExp|Array,key:string|Number):boolean{
if(Array.isArray(pattern)){
returnpattern.indexOf(key)>-1
}elseif(typeofpattern==='string'){
returnpattern.split(',').indexOf(key)>-1
}elseif(isRegExp(pattern)){
returnpattern.test(key)
}
/*istanbulignorenext*/
returnfalse
}

functionpruneCache(keepAliveInstance:any,filter:Function){
const{cache,keys,_vnode}=keepAliveInstance
for(constkeyincache){
constcachedNode:?VNode=cache[key]
if(cachedNode){
//constname:?string=getComponentName(cachedNode.componentOptions)
if(key&&!filter(key)){
pruneCacheEntry(cache,key,keys,_vnode)
}
}
}
}

functionpruneCacheEntry(
cache:VNodeCache,
key:string,
keys:Array,
current?:VNode
){
constcached=cache[key]
if(cached&&(!current||cached.tag!==current.tag)){
cached.componentInstance.$destroy()
}
cache[key]=null
remove(keys,key)
}

constpatternTypes:Array=[String,RegExp,Array]

exportdefault{
name:'keep-alive',
abstract:true,

props:{
include:patternTypes,
exclude:patternTypes,
max:[String,Number]
},

created(){
this.cache=Object.create(null)
this.keys=[]
},

destroyed(){
for(constkeyinthis.cache){
pruneCacheEntry(this.cache,key,this.keys)
}
},

mounted(){
this.$watch('include',val=>{
pruneCache(this,key=>matches(val,key))
})
this.$watch('exclude',val=>{
pruneCache(this,key=>!matches(val,key))
})
},

render(){
constslot=this.$slots.default
constvnode:VNode=getFirstComponentChild(slot)
constkey:?string=vnode.key==null
//sameconstructormaygetregisteredasdifferentlocalcomponents
//socidaloneisnotenough(#3269)
?componentOptions.Ctor.cid+(componentOptions.tag?`::${componentOptions.tag}`:'')
:vnode.key
constcomponentOptions:?VNodeComponentOptions=vnode&&vnode.componentOptions
if(componentOptions){
//checkpattern
constname:?string=getComponentName(componentOptions)
const{include,exclude}=this
if(
//notincluded
(include&&(!key||!matches(include,key)))||
//excluded
(exclude&&key&&matches(exclude,key))
){
returnvnode
}

const{cache,keys}=this

if(cache[key]){
vnode.componentInstance=cache[key].componentInstance
//makecurrentkeyfreshest
remove(keys,key)
keys.push(key)
}else{
cache[key]=vnode
keys.push(key)
//pruneoldestentry
if(this.max&&keys.length>parseInt(this.max)){
pruneCacheEntry(cache,keys[0],keys,this._vnode)
}
}

vnode.data.keepAlive=true
}
returnvnode||(slot&&slot[0])
}
}

如何集成

因为放假赶车的关系，粗略说一下，有问题直接在底下评论：

一、修改package.json：

npminstall时不下载vue，修改packjson.js改为本地的vue："vue":"file:./vue2.5.0/"

"dependencies":{
"axios":"^0.18.0",
"clipboard":"^2.0.0",
"codemirror":"^5.38.0",
"countup":"^1.8.2",
"cropperjs":"^1.2.2",
"dayjs":"^1.7.7",
"echarts":"^4.0.4",
"html2canvas":"^1.0.0-alpha.12",
"iview":"^3.2.2",
"iview-area":"^1.5.17",
"js-cookie":"^2.2.0",
"simplemde":"^1.11.2",
"sortablejs":"^1.7.0",
"tree-table-vue":"^1.1.0",
"v-org-tree":"^1.0.6",
"vue":"file:./vue2.5.0/",
"vue-i18n":"^7.8.0",
"vue-router":"^3.0.1",
"vuedraggable":"^2.16.0",
"vuex":"^3.0.1",
"wangeditor":"^3.1.1",
"xlsx":"^0.13.3"
},

二、修改所有本地importvue为本地文件：

//importVuefrom'vue'
importVuefrom'../vue-2.5.10/src/core/index'

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

修改vue源码实现动态路由缓存的方法

热门推荐

随机推荐