Einführung in die Verwendung und Prinzipien von vue Keep-Alive-Komponenten

Der Inhalt dieses Artikels befasst sich mit der Verwendung und der prinzipiellen Einführung von Vue-Keeping-Alive-Komponenten. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Keep-Alive

Keep-Alive ist eine integrierte Komponente von vue.js. Es kann Instanzen inaktiver Komponenten im Speicher speichern, anstatt sie direkt zu zerstören werden nicht in das echte DOM gerendert und erscheinen auch nicht in der übergeordneten Komponentenkette.
Es stellt zwei Attribute bereit, ausschließen und einschließen, wodurch Komponenten bedingt zwischengespeichert werden können.

Mit der Kommentarkomponente oben wird

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

zwischengespeichert.

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

Wenn Sie auf die Schaltfläche klicken, wechseln die Koma-Komponente und die Kammkomponente, aber der Status der beiden Komponenten wird zu diesem Zeitpunkt zwischengespeichert. Wenn in den a- und b-Komponenten ein Eingabe-Tag vorhanden ist, dann wird der Eingang umgeschaltet. Der Wert der Beschriftung ändert sich nicht.

props

Keep-Alive-Komponente stellt zwei Attribute, „include“ und „exclude“, für bedingtes Caching bereit. Beide können durch durch Kommas getrennte Zeichenfolgen, reguläre Ausdrücke oder Arrays dargestellt werden.

<keep-alive include="a">
    <component></component>
</keep-alive>
//name名为a的组件会被缓存起来

<keep-alive exclude="a">
    <component></component>
</keep-alive>
//name名为a的组件将不会被缓存。

Life-Hook

Keep-Alive bietet zwei Life-Hooks, aktiviert und deaktiviert.
Da Keep-Alive die Komponente im Speicher speichert und sie nicht zerstört oder neu erstellt, werden die erstellten und anderen Methoden der Komponente nicht aufgerufen. Sie müssen aktivierte und deaktivierte Hooks verwenden, um festzustellen, ob die Komponente aktiv ist.

Detaillierte Implementierung der Keep-Alive-Komponente

erstellte und zerstörte Hooks
Der erstellte Hook erstellt ein Cache-Objekt, das als Cache-Container zum Speichern von Vnode-Knoten verwendet wird. Der Hook

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

destroyed löscht alle Komponenteninstanzen im Cache, wenn die Komponente zerstört wird.

/* destroyed钩子中销毁所有cache中的组件实例 */
destroyed () {
    for (const key in this.cache) {
        pruneCacheEntry(this.cache[key])
    }
},

Als nächstes folgt die Renderfunktion.

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
}

Erhalten Sie zuerst die erste Unterkomponente über getFirstComponentChild und den Namen der Komponente (wenn der Komponentenname vorhanden ist, verwenden Sie den Komponentennamen direkt, andernfalls wird das Tag verwendet). Als Nächstes wird der Name über die Einschluss- und Ausschlussattribute abgeglichen. Wenn der Abgleich fehlschlägt (was darauf hinweist, dass kein Caching erforderlich ist), wird der Vnode direkt ohne Operation zurückgegeben.

/* 检测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
}

Die Funktion zum Erkennen der Übereinstimmung von Einschluss- und Ausschlussattributen ist sehr einfach. Die Einschluss- und Ausschlussattribute unterstützen Zeichenfolgen wie „a,b,c“, bei denen Komponentennamen durch Kommas und reguläre Ausdrücke getrennt sind. Matches verwendet diese beiden Methoden, um zu erkennen, ob es mit der aktuellen Komponente übereinstimmt.

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

Das nächste ist ganz einfach: Finden Sie es in this.cache. Wenn es vorhanden ist, bedeutet dies, dass es zuvor zwischengespeichert wurde der aktuelle V-Knoten. Andernfalls wird der Vnode im Cache gespeichert.
Kehren Sie abschließend zum V-Knoten zurück (wenn ein Cache vorhanden ist, wurde die Komponenteninstanz des V-Knotens durch die im Cache ersetzt).
Verwenden Sie watch, um Änderungen in pruneCache und pruneCache-Eigenschaften zu überwachen und die Cache-Daten im Cache-Cache zu ändern, wenn sie sich ändern.

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

Werfen wir einen Blick auf die Implementierung von pruneCache.

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

Alle Elemente im Cache durchlaufen Wenn sie nicht den vom Filter angegebenen Regeln entsprechen, wird pruneCacheEntry ausgeführt. pruneCacheEntry ruft die Methode $destroy der Komponenteninstanz auf, um die Komponente zu zerstören.

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Video-Tutorial auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung und Prinzipien von vue Keep-Alive-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!