修改vue源碼實現(xiàn)動態(tài)路由緩存的方法
動態(tài)路由
官網(wǎng)解讀 ：我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對于所有 ID 各不相同的用戶，都要使用這個組件來渲染。那么，我們可以在 vue-router 的路由路徑中使用“動態(tài)路徑參數(shù)”(dynamic segment) 來達到這個效果。
即如果你有一個 盤點錄入單 路由，但你想通過不同的傳不同的 ID 來加載 CheckInputInfo 這個組件，若采用 params 方式，這時只需要在 path 后面配置 /:taskId 即可實現(xiàn) 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 即可實現(xiàn) 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 來實現(xiàn)動態(tài)路由，并可通過 this.＄route.xx 來獲取當前的 params 或 query ，省去了直接操作或處理 window.location ，還是挺方便的。
注意 ：當使用路由參數(shù)時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。
解讀：在不使用 keep-alive 的情況下，我們每次加載路由，這時會重新 render 當前路由掛載的 component ，但若這兩個路由是同一個路由組件配置的動態(tài)路由， vue 為了性能設計了不會重新 render 。
這顯然不符合我們的預期，那么該如何在動態(tài)路由下?lián)碛型暾纳芷谀兀看鸢甘?keep-alive 。
keep-alive
官網(wǎng)解讀 ：keep-alive 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。和 transition 相似，keep-alive 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 樹內(nèi)的所有嵌套組件中觸發(fā)。當組件在 內(nèi)被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應執(zhí)行。
keep-alive通過緩存Vnode的方式解決了SPA最為關(guān)鍵的性能問題。以下，我就按步驟來分析以下：
一、路由觸發(fā)路由組件重新render的問題
1、不緩存模式：
<router-view></router-view>
每次切換都會重新 render ，執(zhí)行整個生命周期，每次切換時，重新 render ，重新請求，，必然不滿足需求。
2、緩存模式：
<keep-alive> <router-view></router-view> </keep-alive>
只是在進入當前路由的第一次 render ，來回切換不會重新執(zhí)行生命周期，且能緩存 router-view 的數(shù)據(jù)。
二、router-view 數(shù)據(jù)緩存問題
keep-alive 采用 render 函數(shù)來創(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
于是當時用 keep-alive 時，我們就可以保存每個 route-view 的數(shù)據(jù)。
動態(tài)路由緩存問題及如何實現(xiàn)
一、bug表象
最開始其實是不知道這個 bug 的，也是通過現(xiàn)象反推，然后由源碼解決這個問題的，那就先從現(xiàn)象說起：
動態(tài)路由緩存的的具體表現(xiàn)在：
由動態(tài)路由配置的路由只能緩存一份數(shù)據(jù)。 keep-alive 動態(tài)路由只有第一個會有完整的生命周期，之后的路由只會觸發(fā) actived 和 deactivated 這兩個鉤子。 一旦更改動態(tài)路由的某個路由數(shù)據(jù)，期所有同路由下的動態(tài)路由數(shù)據(jù)都會同步更新。
我們的期望其實是在使用 keep-alive 的情況下，動態(tài)路由能有非動態(tài)的表現(xiàn)，即擁有 完整的生命周期 、 各自的數(shù)據(jù)緩存 。
二、發(fā)掘問題關(guān)鍵
入手 keep-alive 源碼發(fā)現(xiàn)，其實問題就出現(xiàn)在這一步：
if (
// not included
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
return vnode
}
通過上面的表象其實可以探究出， router-view 其實是已經(jīng)緩存了，而且一個動態(tài)路由的 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 屬性要和組件內(nèi)部的 name 值保持一致。
看到這里，問題已經(jīng)水落石出了，因為動態(tài)路由配置的組件相同， getComponentName 每次返回相同 name ，然后 render() 去緩存了相同的 Vnode ，且只能緩存了一份。既然如此，只要能正確的緩存 Vnode 和取出 Vnode ，動態(tài)路由情況下， keep-alive 依然能正常運行。
修改Vue源碼
上面說到了是因為動態(tài)路由組件名的問題，如果將緩存的 key 設置為唯一不就行了嗎？
于是在 router-view 上配置key，key取得師path，永遠唯一：
<keep-alive :include="cacheList"> <router-view :key="$route.path"></router-view> </keep-alive>
然后修改 keep-alive.js 源碼，如下（因為放假的關(guān)系不詳細說了，直接貼源碼，實現(xiàn)的人就是我，也是第一個，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])
}
}
如何集成
因為放假趕車的關(guān)系，粗略說一下，有問題直接在底下評論：
一、修改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'
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue初始化項目時,一直卡在Project description上的問題
今天小編就為大家分享一篇解決vue初始化項目時,一直卡在Project description上的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue項目使用Websocket大文件FileReader()切片上傳實例
這篇文章主要介紹了Vue項目使用Websocket大文件FileReader()切片上傳實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定問題
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn)
一個好的項目開始搭建總是需要配置許多初始化配置,本文就來介紹一下Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-02-02
本文主要介紹了electron最小化托盤設置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要為大家詳細介紹了基于Vue.js實現(xiàn)簡單搜索框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了vue-cli 關(guān)閉熱更新操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了詳解Vue.js v-for不支持IE9的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文主要介紹了vue中實現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個字段轉(zhuǎn)換,一種是表格table中的整列字段轉(zhuǎn)換,具有一定的參考價值,感興趣的可以了解一下2023-11-11
vue3.0使用vue-pdf-embed在線預覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-01-01