## 前言 我們知道最新的組件中出了keep-alive組件，只要將子組件嵌套在這里面就可以實現組件的緩存，當頁面返回時數據不會丟失，實現了我們常見的歷史頁面不刷新的效果。本文就根據晚上找到的文章分析學習下這部分的邏輯。 ## 原理解析 我們知道vue是通過vnode實現保存節點的，而keep-alive本身也是通過保存vnode來實現緩存的，而不是直接存儲DOM結構。其實就是將需要緩存的VNode節點保存在this.cache中／在render時,如果VNode的name符合在緩存條件（可以用include以及exclude控制），則會從this.cache中取出之前緩存的VNode實例進行渲染。 ## 源碼解讀 ~~~ type VNodeCache = { [key: string]: ?VNode }; const patternTypes: Array<Function> = [String, RegExp] /* 獲取組件名稱 */ function getComponentName (opts: ?VNodeComponentOptions): ?string { return opts && (opts.Ctor.options.name || opts.tag) } /* 檢測name是否匹配 */ function matches (pattern: string | RegExp, name: string): boolean { if (typeof pattern === 'string') { /* 字符串情況，如a,b,c */ return pattern.split(',').indexOf(name) > -1 } else if (isRegExp(pattern)) { /* 正則 */ return pattern.test(name) } /* istanbul ignore next */ return false } /* 修正cache */ function pruneCache (cache: VNodeCache, current: VNode, filter: Function) { for (const key in cache) { /* 取出cache中的vnode */ const cachedNode: ?VNode = cache[key] if (cachedNode) { const name: ?string = getComponentName(cachedNode.componentOptions) /* name不符合filter條件的，同時不是目前渲染的vnode時，銷毀vnode對應的組件實例（Vue實例），并從cache中移除 */ if (name && !filter(name)) { if (cachedNode !== current) { pruneCacheEntry(cachedNode) } cache[key] = null } } } } /* 銷毀vnode對應的組件實例（Vue實例） */ function pruneCacheEntry (vnode: ?VNode) { if (vnode) { vnode.componentInstance.$destroy() } } /* keep-alive組件 */ export default { name: 'keep-alive', /* 抽象組件 */ abstract: true, props: { include: patternTypes, exclude: patternTypes }, created () { /* 緩存對象 */ this.cache = Object.create(null) }, /* destroyed鉤子中銷毀所有cache中的組件實例 */ destroyed () { for (const key in this.cache) { pruneCacheEntry(this.cache[key]) } }, watch: { /* 監視include以及exclude，在被修改的時候對cache進行修正 */ include (val: string | RegExp) { pruneCache(this.cache, this._vnode, name => matches(val, name)) }, exclude (val: string | RegExp) { pruneCache(this.cache, this._vnode, name => !matches(val, name)) } }, render () { /* 得到slot插槽中的第一個組件 */ const vnode: VNode = getFirstComponentChild(this.$slots.default) const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions if (componentOptions) { // check pattern /* 獲取組件名稱，優先獲取組件的name字段，否則是組件的tag */ const name: ?string = getComponentName(componentOptions) /* name不在inlcude中或者在exlude中則直接返回vnode（沒有取緩存） */ if (name && ( (this.include && !matches(this.include, name)) || (this.exclude && matches(this.exclude, name)) )) { return vnode } 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 /* 如果已經做過緩存了則直接從緩存中獲取組件實例給vnode，還未緩存過則進行緩存 */ if (this.cache[key]) { vnode.componentInstance = this.cache[key].componentInstance } else { this.cache[key] = vnode } /* keepAlive標記位 */ vnode.data.keepAlive = true } return vnode } } ~~~