Vue의 캐시 페이지 관리 방법

문제 해결

 this.cache = Object.create(null) // vnode cache[key] => Vnode
 this.keys = [] // vnode key

if (cache[key]) {
 vnode.componentInstance = cache[key].componentInstance // vnode vue vnode 
 // make current key freshest
 remove(keys, key)
 keys.push(key)
}

export default {
 created () {
 this.cache = Object.create(null)
 },
 render () {
 const childNode = this.$slots.default[0]
 const cid = childNode.componentOptions.Ctor.cid
 if (this.cache[cid]) {
  const child = childNode.child = this.cache[cid].child // vnode
  childNode.elm = this.$el = child.$el
 } else {
  this.cache[cid] = childNode
 }
 childNode.data.keepAlive = true
 return childNode
 },
 beforeDestroy () {
 for (const key in this.cache) {
  this.cache[key].child.$destroy()
 }
 }
}

include -  。
exclude -  。
max -  。

const name: ?string = getComponentName(componentOptions)

if (this.max && keys.length > parseInt(this.max)) {
 pruneCacheEntry(cache, keys[0], keys, this._vnode)
}

1. 폐기 방법

this.$destroy(); // keep-alive 

 const dtmp = Vue.prototype.$destroy;
 const f = function() {
 if (this.$vnode && this.$vnode.data.keepAlive) {
  if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
  if (this.$vnode.componentOptions) {
   var key = !isDef(this.$vnode.key)
   ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
   : this.$vnode.key;
   var cache = this.$vnode.parent.componentInstance.cache;
   var keys = this.$vnode.parent.componentInstance.keys;
   if (cache[key]) {
   if (keys.length) {
    var index = keys.indexOf(key);
    if (index > -1) {
    keys.splice(index, 1);
    }
   }
   delete cache[key];
   }
  }
  }
 }
 dtmp.apply(this, arguments);
 }
 Vue.prototype.$keepAliveDestroy = f;

2. 언제 폐기

2.1 방안은 루트를 사용한다.query 현재 페이지 스택 깊이 기록

this.$router.push({
 path:"/targer",
 query:{
 stackLevel:Number(this.$route.query.stackLevel) + 1 	
 }
})

2.2 프로젝트 2는 Vue 인스턴스를 사용하여 현재 스택 깊이를 자체 기록합니다.

2.3 방안 3 사용 역사.state 레코드 스택 깊이

if(target.stack < current.stack){
 current.$keepAliveDestroy();
}

문제 2 페이지와 다른 캐시 여러 개의 실례

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

1. 어떻게 유일하게 할 것인가

1.1 타임 스탬프, 초대형 랜덤 수

key = Date.now()

1.2 라우팅 스택 높이 + 경로 이름

2. 키의 값을 페이지의 vnode에 어떻게 부여합니까

2.1 경로를 통과합니다.query 동적 바인딩 키

// key
...
<router-view :key='$route.query.routerKey' />
...


//push 
this.$router.push({
 path:"/foo",
 query:{
 	routerKey: Date.now() // key
 }
})

2.2 Vnode에 직접 할당된 값 가져오기

...
 render () {
 const slot = this.$slots.default
 const vnode: VNode = getFirstComponentChild(slot)
...

const tmp = vm.$options.render //vm is keep-alive component instance
vm.$options.render = function() {
 const slot = this.$slots.default;
 const vnode = getFirstComponentChild(slot) // vnode is a keep-alive-component-vnode
 if (historyShouldChange) {
 if (!isDef(vnode.key)) {
  if (isReplace) {
  vnode.key = genKey(router._stack)
  } else if (isPush()) {
  vnode.key = genKey(Number(router._stack) + 1)
  } else {
  vnode.key = genKey(Number(router._stack) - 1)
  }
 }
 } else {
 // when historyShouldChange is false should rerender only, should not create new vm ,use the same vnode.key issue#7
 vnode.key = genKey(router._stack)
 }
 return tmp.apply(this, arguments)
}

총결산