修改vue源碼實(shí)現(xiàn)動(dòng)態(tài)路由緩存的方法
動(dòng)態(tài)路由
官網(wǎng)解讀 ：我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同個(gè)組件。例如，我們有一個(gè) User 組件，對(duì)于所有 ID 各不相同的用戶，都要使用這個(gè)組件來(lái)渲染。那么，我們可以在 vue-router 的路由路徑中使用“動(dòng)態(tài)路徑參數(shù)”(dynamic segment) 來(lái)達(dá)到這個(gè)效果。
即如果你有一個(gè) 盤點(diǎn)錄入單 路由，但你想通過(guò)不同的傳不同的 ID 來(lái)加載 CheckInputInfo 這個(gè)組件，若采用 params 方式，這時(shí)只需要在 path 后面配置 /:taskId 即可實(shí)現(xiàn) CheckInputInfo/1 和 CheckInputInfo/2 這樣的路由，同時(shí)可以通過(guò) this.$route.params.taskId 來(lái)獲取當(dāng)前路由的 taskId 。
{
path: 'CheckInputInfo/:taskId',
meta: {
title: '盤點(diǎn)錄入單'
},
name: 'CheckInputInfo',
component: () => import('@/view/Check/CheckInputInfo.vue')
}
類似的，同樣也可使用 query 方式，這時(shí)只需要在 path 后面配置 :taskId 即可實(shí)現(xiàn) CheckInputInfo?taskId=1 和 CheckInputInfo?taskId=2 這樣的路由,同時(shí)可以通過(guò) this.＄route.query.taskId 來(lái)獲取當(dāng)前路由的 taskId 。
{
path: 'CheckInputInfo:taskId',
meta: {
title: '盤點(diǎn)錄入單'
},
name: 'CheckInputInfo',
component: () => import('@/view/Check/CheckInputInfo.vue')
}
vue-router 通過(guò)配置 params 和 query 來(lái)實(shí)現(xiàn)動(dòng)態(tài)路由，并可通過(guò) this.＄route.xx 來(lái)獲取當(dāng)前的 params 或 query ，省去了直接操作或處理 window.location ，還是挺方便的。
注意 ：當(dāng)使用路由參數(shù)時(shí)，例如從 /user/foo 導(dǎo)航到 /user/bar，原來(lái)的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過(guò)，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。
解讀：在不使用 keep-alive 的情況下，我們每次加載路由，這時(shí)會(huì)重新 render 當(dāng)前路由掛載的 component ，但若這兩個(gè)路由是同一個(gè)路由組件配置的動(dòng)態(tài)路由， vue 為了性能設(shè)計(jì)了不會(huì)重新 render 。
這顯然不符合我們的預(yù)期，那么該如何在動(dòng)態(tài)路由下?lián)碛型暾纳芷谀?？答案?keep-alive 。
keep-alive
官網(wǎng)解讀 ：keep-alive 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和 transition 相似，keep-alive 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在組件的父組件鏈中。在 2.2.0 及其更高版本中，activated 和 deactivated 將會(huì)在 樹內(nèi)的所有嵌套組件中觸發(fā)。當(dāng)組件在 內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。
keep-alive通過(guò)緩存Vnode的方式解決了SPA最為關(guān)鍵的性能問(wèn)題。以下，我就按步驟來(lái)分析以下：
一、路由觸發(fā)路由組件重新render的問(wèn)題
1、不緩存模式：
<router-view></router-view>
每次切換都會(huì)重新 render ，執(zhí)行整個(gè)生命周期，每次切換時(shí)，重新 render ，重新請(qǐng)求，，必然不滿足需求。
2、緩存模式：
<keep-alive> <router-view></router-view> </keep-alive>
只是在進(jìn)入當(dāng)前路由的第一次 render ，來(lái)回切換不會(huì)重新執(zhí)行生命周期，且能緩存 router-view 的數(shù)據(jù)。
二、router-view 數(shù)據(jù)緩存問(wèn)題
keep-alive 采用 render 函數(shù)來(lái)創(chuàng)建 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
于是當(dāng)時(shí)用 keep-alive 時(shí)，我們就可以保存每個(gè) route-view 的數(shù)據(jù)。
動(dòng)態(tài)路由緩存問(wèn)題及如何實(shí)現(xiàn)
一、bug表象
最開始其實(shí)是不知道這個(gè) bug 的，也是通過(guò)現(xiàn)象反推，然后由源碼解決這個(gè)問(wèn)題的，那就先從現(xiàn)象說(shuō)起：
動(dòng)態(tài)路由緩存的的具體表現(xiàn)在：
由動(dòng)態(tài)路由配置的路由只能緩存一份數(shù)據(jù)。 keep-alive 動(dòng)態(tài)路由只有第一個(gè)會(huì)有完整的生命周期，之后的路由只會(huì)觸發(fā) actived 和 deactivated 這兩個(gè)鉤子。 一旦更改動(dòng)態(tài)路由的某個(gè)路由數(shù)據(jù)，期所有同路由下的動(dòng)態(tài)路由數(shù)據(jù)都會(huì)同步更新。
我們的期望其實(shí)是在使用 keep-alive 的情況下，動(dòng)態(tài)路由能有非動(dòng)態(tài)的表現(xiàn)，即擁有 完整的生命周期 、 各自的數(shù)據(jù)緩存 。
二、發(fā)掘問(wèn)題關(guān)鍵
入手 keep-alive 源碼發(fā)現(xiàn)，其實(shí)問(wèn)題就出現(xiàn)在這一步：
if (
// not included
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
return vnode
}
通過(guò)上面的表象其實(shí)可以探究出， router-view 其實(shí)是已經(jīng)緩存了，而且一個(gè)動(dòng)態(tài)路由的 router-view 都是通過(guò)了 if 判斷返回了 Vnode 。那么再看一下這個(gè) name 是什么：
function getComponentName (opts: ?VNodeComponentOptions): ?string {
return opts && (opts.Ctor.options.name || opts.tag)
}
const name: ?string = getComponentName(componentOptions)
這里的 opts 其實(shí)對(duì)應(yīng)的就是 VueComponent 的 ＄options ，而 this.＄options.name 不就是對(duì)應(yīng)著得 .vue 文件里聲明的 name 屬性。然后又想到，怪不得配置路由的時(shí)候要求提供的 name 屬性要和組件內(nèi)部的 name 值保持一致。
看到這里，問(wèn)題已經(jīng)水落石出了，因?yàn)閯?dòng)態(tài)路由配置的組件相同， getComponentName 每次返回相同 name ，然后 render() 去緩存了相同的 Vnode ，且只能緩存了一份。既然如此，只要能正確的緩存 Vnode 和取出 Vnode ，動(dòng)態(tài)路由情況下， keep-alive 依然能正常運(yùn)行。
修改Vue源碼
上面說(shuō)到了是因?yàn)閯?dòng)態(tài)路由組件名的問(wèn)題，如果將緩存的 key 設(shè)置為唯一不就行了嗎？
于是在 router-view 上配置key，key取得師path，永遠(yuǎn)唯一：
<keep-alive :include="cacheList"> <router-view :key="$route.path"></router-view> </keep-alive>
然后修改 keep-alive.js 源碼，如下（因?yàn)榉偶俚年P(guān)系不詳細(xì)說(shuō)了，直接貼源碼，實(shí)現(xiàn)的人就是我，也是第一個(gè)，github上此BUG目前還是open狀態(tài)）:
/*
*@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])
}
}
如何集成
因?yàn)榉偶仝s車的關(guān)系，粗略說(shuō)一下，有問(wèn)題直接在底下評(píng)論：
一、修改package.json：
npm install時(shí)不下載 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'
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇關(guān)于實(shí)例講解v-if和v-show的區(qū)別，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Vue為什么要謹(jǐn)慎使用$attrs與$listeners
這篇文章主要介紹了Vue為什么要謹(jǐn)慎使用$attrs與$listeners，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
今天小編就為大家分享一篇關(guān)于vue表單提交防雙/多擊的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了vue路由分文件拆分管理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
關(guān)于Vue.js一些問(wèn)題和思考學(xué)習(xí)筆記（1）
這篇文章主要為大家分享了關(guān)于Vue.js一些問(wèn)題和思考的學(xué)習(xí)筆記,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)
這篇文章主要介紹了使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄
本文主要介紹了ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了Vue2.0 $set()的正確使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒(méi)出錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒(méi)出錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
前端Vue?select下拉框使用以及監(jiān)聽事件詳解
由于前端項(xiàng)目使用的是Vue.js和bootstrap整合開發(fā),中間用到了select下拉框,這篇文章主要給大家介紹了關(guān)于前端Vue?select下拉框使用以及監(jiān)聽事件的相關(guān)資料,需要的朋友可以參考下2024-03-03