Lassen Sie uns über das Verständnis der integrierten Keep-Alive-Komponente von Vue sprechen

• include – Zeichenfolge oder regulärer Ausdruck. Nur Komponenten mit übereinstimmenden Namen werden zwischengespeichert
• exclude – String oder regulärer Ausdruck. Jede Komponente mit einem übereinstimmenden Namen wird nicht zwischengespeichert
• max – Zahl. Die maximale Anzahl von Komponenteninstanzen, die zwischengespeichert werden können

/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
    remove(keys, key)
    keys.push(key)
}

• Beim ersten Betreten der Komponente: beforeRouteEnter > beforeCreate > > aktiviert > beforeRouteLeave > li>
• Geben Sie die Komponente erneut ein. Wenn: beforeRouteEnter >aktiviert > code>deaktiviert

🎜2. Nutzungsszenarien🎜🎜🎜Nutzungsprinzip: Wenn wir die Seite nicht neu laden müssen In einigen Szenarien können wir keepalive verwenden >Geschäftsdetailseite–> ;Zurück Zu diesem Zeitpunkt sollte die Listenseite am Leben bleiben🎜🎜von der Startseite</code sein >–><code>Listenseite</code >–><code>Geschäftsdetailseite–>Zurück zur Listenseite (Caching erforderlich)–> Zurück zur Startseite (Caching erforderlich)– >Geben Sie die Listenseite erneut ein (kein Caching erforderlich). Zu diesem Zeitpunkt können Sie das Keep-Alive steuern der Seite nach Bedarf🎜🎜Das Attribut keepAlive festlegen legt fest, ob Caching erforderlich ist🎜

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

Nach dem Login kopieren

Nach dem Login kopieren

🎜Verwenden Sie <keep-alive>🎜

activated(){
   this.getData() // 获取数据
},

Nach dem Login kopieren

Nach dem Login kopieren

🎜3. Prinzipanalyse🎜🎜🎜keep -alive ist eine in vue integrierte Komponente. 🎜🎜Quellcode-Speicherort: src/core/components/keep -alive.js🎜rrreee🎜Sie können sehen, dass diese Komponente kein template hat, sondern render verwendet, wodurch das render automatisch ausgeführt wird Funktion beim Rendern der Komponente🎜🎜this.cache ist ein Objekt, das zum Speichern von Komponenten verwendet wird, die zwischengespeichert werden müssen. Es wird in der folgenden Form gespeichert: 🎜rrreee🎜Führen Sie den pruneCacheEntry aus -Funktion, wenn die Komponente zerstört wird 🎜rrreee🎜Beobachten Sie die Hook-Funktion mount < Die Änderungen in Code>include und exclude sind wie folgt: 🎜rrreee🎜Wenn sich include oder exclude ändert, bedeutet dies, dass die Definition erforderlich ist. Wenn sich die Regeln von zwischengespeicherten Komponenten oder die Regeln von Komponenten, die nicht zwischengespeichert werden müssen, geändert haben, Führen Sie dann die Funktion pruneCache aus. Die Funktion lautet wie folgt: 🎜rrreee🎜Aktualisieren Sie in dieser Funktion this.cache</code >Traversieren Sie das Objekt und nehmen Sie den <code>Name</ heraus. Geben Sie den Wert jedes Elements ein und verwenden Sie ihn, um ihn mit der neuen Caching-Regel abzugleichen. Wenn er nicht übereinstimmt, bedeutet dies, dass die Komponente nicht mehr unter der neuen Caching-Regel zwischengespeichert werden muss. Rufen Sie dann den <code>pruneCacheEntry</ auf. code>-Funktion, um es aus dem <code>this.cache-Objekt zu entfernen🎜🎜Die leistungsstärkste Caching-Funktion von keep-alive ist im render implementiert Funktion 🎜🎜Erhalten Sie zuerst den key-Wert der Komponente: 🎜rrreee🎜Nachdem Sie den key-Wert erhalten haben, gehen Sie zum this.cache-Objekt, um es zu finden Wenn dieser Wert vorhanden ist, bedeutet dies, dass die Komponente einen Cache hat, d. h. sie trifft auf den Cache wie folgt: 🎜

/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
    remove(keys, key)
    keys.push(key)
}

Nach dem Login kopieren

Nach dem Login kopieren

直接从缓存中拿 vnode 的组件实例，此时重新调整该组件key的顺序，将其从原来的地方删掉并重新放在this.keys中最后一个

this.cache对象中没有该key值的情况，如下：

/* 如果没有命中缓存，则将其设置进缓存 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

Nach dem Login kopieren

Nach dem Login kopieren

表明该组件还没有被缓存过，则以该组件的key为键，组件vnode为值，将其存入this.cache中，并且把key存入this.keys中

此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max，如果超过了，则把第一个缓存组件删掉

四、思考题：缓存后如何获取数据

解决方案可以有以下两种：

• beforeRouteEnter
• actived

beforeRouteEnter

每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

actived

在keep-alive缓存的组件被激活的时候，都会执行actived钩子

activated(){
   this.getData() // 获取数据
},

注意：服务器端渲染期间avtived不被调用