怎么提高修改vue源码实现动态路由缓存
怎么提高修改vue源码实现动态路由缓存？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联是一家专业提供博湖企业网站建设,专注与成都网站制作、成都网站建设、成都h5网站建设、小程序制作等业务。10年已为博湖众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
可以通过 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、不缓存模式：
<router-view></router-view>
每次切换都会重新 render，执行整个生命周期，每次切换时，重新 render，重新请求，，必然不满足需求。
2、缓存模式：
<keep-alive> <router-view></router-view> </keep-alive>
只是在进入当前路由的第一次 render，来回切换不会重新执行生命周期，且能缓存 router-view的数据。
二、router-view 数据缓存问题
keep-alive 采用 render函数来创建 Vnode，一下是 vue v2.5.10的 keep-alive.js的 render()：
render () {
const slot = this.$slots.default
const vnode: VNode = getFirstComponentChild(slot)
const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
if (componentOptions) {
// check pattern
const name: ?string = getComponentName(componentOptions)
const { include, exclude } = this
if (
// not included
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
return vnode
}
const { cache, keys } = this
const key: ?string = vnode.key == null
// same constructor may get registered as different local components
// so cid alone is not enough (#3269)
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
// make current key freshest
remove(keys, key)
keys.push(key)
} else {
cache[key] = vnode
keys.push(key)
// prune oldest entry
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
vnode.data.keepAlive = true
}
return vnode || (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 (
// not included
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
return vnode
}通过上面的表象其实可以探究出， router-view其实是已经缓存了，而且一个动态路由的 router-view都是通过了 if判断返回了 Vnode。那么再看一下这个 name是什么：
function getComponentName (opts: ?VNodeComponentOptions): ?string {
return opts && (opts.Ctor.options.name || opts.tag)
}
const name: ?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 :include="cacheList"> <router-view :key="$route.path"></router-view> </keep-alive>
然后修改 keep-alive.js源码，如下（因为放假的关系不详细说了，直接贴源码，实现的人就是我，也是第一个，github上此BUG目前还是open状态）:
/*
*@flow
*modify by LK 20190624
*/
import { isRegExp, remove } from 'shared/util'
import { getFirstComponentChild } from 'core/vdom/helpers/index'
type VNodeCache = { [key: string]: ?VNode };
function getComponentName (opts: ?VNodeComponentOptions): ?string {
return opts && (opts.Ctor.options.name || opts.tag)
}
function matches (pattern: string | RegExp | Array<string>, key: string | Number): boolean {
if (Array.isArray(pattern)) {
return pattern.indexOf(key) > -1
} else if (typeof pattern === 'string') {
return pattern.split(',').indexOf(key) > -1
} else if (isRegExp(pattern)) {
return pattern.test(key)
}
/* istanbul ignore next */
return false
}
function pruneCache (keepAliveInstance: any, filter: Function) {
const { cache, keys, _vnode } = keepAliveInstance
for (const key in cache) {
const cachedNode: ?VNode = cache[key]
if (cachedNode) {
// const name: ?string = getComponentName(cachedNode.componentOptions)
if (key && !filter(key)) {
pruneCacheEntry(cache, key, keys, _vnode)
}
}
}
}
function pruneCacheEntry (
cache: VNodeCache,
key: string,
keys: Array<string>,
current?: VNode
) {
const cached = cache[key]
if (cached && (!current || cached.tag !== current.tag)) {
cached.componentInstance.$destroy()
}
cache[key] = null
remove(keys, key)
}
const patternTypes: Array<Function> = [String, RegExp, Array]
export default {
name: 'keep-alive',
abstract: true,
props: {
include: patternTypes,
exclude: patternTypes,
max: [String, Number]
},
created () {
this.cache = Object.create(null)
this.keys = []
},
destroyed () {
for (const key in this.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 () {
const slot = this.$slots.default
const vnode: VNode = getFirstComponentChild(slot)
const key: ?string = vnode.key == null
// same constructor may get registered as different local components
// so cid alone is not enough (#3269)
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
if (componentOptions) {
// check pattern
const name: ?string = getComponentName(componentOptions)
const { include, exclude } = this
if (
// not included
(include && (!key || !matches(include, key))) ||
// excluded
(exclude && key && matches(exclude, key))
) {
return vnode
}
const { cache, keys } = this
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
// make current key freshest
remove(keys, key)
keys.push(key)
} else {
cache[key] = vnode
keys.push(key)
// prune oldest entry
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
vnode.data.keepAlive = true
}
return vnode || (slot && slot[0])
}
}如何集成
因为放假赶车的关系，粗略说一下，有问题直接在底下评论：
一、修改package.json：
npm install时不下载 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"
},二、修改所有本地 import vue 为本地文件：
// import Vue from 'vue' import Vue from '../vue-2.5.10/src/core/index'
关于怎么提高修改vue源码实现动态路由缓存问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
网站栏目：怎么提高修改vue源码实现动态路由缓存
本文路径：https://www.cdcxhl.com/article28/gighcp.html
成都网站建设公司_创新互联，为您提供移动网站建设、定制开发、外贸建站、App开发、商城网站、网站排名
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 移动网站建设的四个设计基本要求 2017-01-25
- 浅析移动网站建设的一些经验分享 2016-10-20
- 移动网站建设时要注意视觉的设计及优化 2016-10-05
- 移动网站建设关注移动支付花样百出，为此谁get了? 2022-07-14
- 移动网站建设需要注意的地方 2014-09-09
- 移动网站建设成功与失败的决定性因素有哪些？ 2017-01-25
- 移动网站建设有什么作用？ 2023-03-11
- 成都网站建设与移动网站建设的关系 2016-10-29
- 移动网站建设的核心内容是什么 2021-09-26
- 移动网站建设需要做到这几点 2022-05-02
- 移动网站建设十大原则 2022-11-28
- 浅谈移动网站建设的那些要点分析 2017-01-22