Vue: Speicherverlust bei Verwendung von "Übergang" und "Keep-Alive"

Erstellt am 7. Apr. 2019 · 5Kommentare · Quelle: vuejs/vue

Ausführung

2.6.10

Reproduktionslink

Schritte zum Reproduzieren

Ich habe eine Demo geschrieben:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>demo</title>
    <style>
      .link {
        cursor: pointer;
        user-select: none;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <div id="app">
      <transition>
        <keep-alive include="foo">
          <component :is="target" @change="onChange"></component>
        </keep-alive>
      </transition>
    </div>
    <script>
      const Foo = {
        name: "foo",
        template: `<div class="link" @click="$emit('change', 'bar')">Go to Bar</div>`
      };
      const Bar = {
        name: "bar",
        template: `<div class="link" @click="$emit('change', 'foo')">Go to Foo</div>`
      };
      Vue.component("foo", Foo);
      Vue.component("bar", Bar);
      const app = new Vue({
        data: {
          target: "foo"
        },
        methods: {
          onChange(target) {
            this.target = target;
          }
        }
      }).$mount("#app");
    </script>
  </body>
</html>

Der Debugging-Prozess ist wie folgt:
1 Klicken Sie auf "Müll sammeln" und "Heap-Schnappschuss erstellen" (Schnappschuss 1).
2 Klicken Sie 10 Mal auf die Routing-Schaltfläche links und dann auf "Müll sammeln" und "Heap-Snapshot erstellen" (Snapshot 2).
3 Klicken Sie 10 Mal auf die Routing-Schaltfläche links und dann auf "Müll sammeln" und "Heap-Snapshot erstellen" (Snapshot 3).

Der generierte "Schnappschuss" lautet wie folgt:

Schnappschuss 1:

Schnappschuss 2:

Schnappschuss 3:

Nach 100-maligem Klicken:

VueComponent wird nicht recycelt. Ist dies ein Fehler?

Was wird erwartet?

Warum passiert das, ist das ein Fehler?

Was passiert eigentlich?

Die Komponente wird beim Wechseln der Komponenten nicht gelöscht.

bug has PR

Quelle

Aaron-Bird

👍1

Hilfreichster Kommentar

Ich würde wirklich gerne ein Update zu diesem Thema sehen - es gibt PR, aber es scheint tot zu sein?

kadet1090 am 19. Jan. 2020

👍2

Alle 5 Kommentare

Ich werde mir das mal ansehen.

dejour am 10. Apr. 2019

Alle Komponenten werden vom übergeordneten vnode-übergeordneten Element ， beibehalten, wenn das übergeordnete Element gelöscht wird. Dann werden die Komponenten recycelt. Werden mehr graben

dejour am 13. Apr. 2019

Ich habe auch ein Problem mit Speicherverlusten, siehe: https://github.com/bootstrap-vue/bootstrap-vue/issues/4214

Ich habe versucht, eine jsfiddle zu erstellen, bin mir aber nicht sicher, wie ich das Caching-Verhalten replizieren soll.

sprocket99 am 8. Okt. 2019

Hey, gibt es Neuigkeiten? Sind diese Updates bereits mit dem Hauptzweig zusammengeführt? Ich habe das gleiche Problem.

sky8ez am 6. Jan. 2020

👍2