vuekeep-alive組件的使用以及原理介紹

<keep-alive>
 <comment></comment>
</keep-alive>

<keep-alive>
 <coma v-if="test"></coma>
 <comb v-else></comb>
</keep-alive>
<button @click="abc"></button>

export default{
 data(){
 reurn{
 test:true
 }
 },
 methods:{
 abc(){
 this.test=!this.test;
 }
 }
}

<keep-alive include="a">
 <component></component>
</keep-alive>
//name名為a的組件會被緩存起來

<keep-alive exclude="a">
 <component></component>
</keep-alive>
//name名為a的組件將不會被緩存。

created{
 this.cache=Object.create(null);
}

/* destroyed鉤子中銷毀所有cache中的組件實例 */
destroyed () {
 for (const key in this.cache) {
 pruneCacheEntry(this.cache[key])
 }
},

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
}

/* 檢測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
}

if (this.cache[key]) {
 vnode.componentInstance = this.cache[key].componentInstance
} else {
 this.cache[key] = vnode
}

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))
 }
},

/* 修正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()
 }
}