Vue: Утечка памяти при использовании "перехода" и "поддержания активности"

Созданный на 7 апр. 2019 · 5Комментарии · Источник: vuejs/vue

Версия

2.6.10

Ссылка для воспроизведения

https://codepen.io/aaronbird/pen/JVRKwa

Действия по воспроизведению

Я написал демо:

<!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>

Процесс отладки выглядит следующим образом:
1 Нажмите «Собрать мусор» и «Сделать снимок кучи» (снимок 1).
2 Нажмите кнопку маршрутизации слева 10 раз, затем нажмите «Собрать мусор» и «Сделать снимок кучи» (снимок 2).
3 Нажмите кнопку маршрутизации слева 10 раз, затем нажмите «Собрать мусор» и «Сделать снимок кучи» (снимок 3).

Сгенерированный «снимок» выглядит следующим образом:

снимок 1:

снимок 2:

снимок 3:

После 100 нажатий:

VueComponent не перерабатывается, это ошибка?

Что ожидается?

Почему это происходит, это ошибка?

Что на самом деле происходит?

Компонент не будет очищен при переключении компонентов.

bug has PR

Источник

Aaron-Bird

👍1

Самый полезный комментарий

Я бы очень хотел узнать новости по этому поводу - пиар есть, но кажется мертвым?

kadet1090 19 янв. 2020

👍2

Все 5 Комментарий

Я посмотрю на это.

dejour 10 апр. 2019

Если мы удалим родительский узел, все компоненты сохранятся в кешируемом родительском узле vnode. то компоненты утилизируются. буду копать больше

dejour 13 апр. 2019

У меня также есть проблема с утечкой памяти, см. Https://github.com/bootstrap-vue/bootstrap-vue/issues/4214

Я попытался создать jsfiddle, но не уверен, как воспроизвести поведение кеширования.

sprocket99 8 окт. 2019

Эй, есть какие-нибудь новости? это обновления уже объединены с основной веткой? У меня та же проблема.

sky8ez 6 янв. 2020

👍2

Я бы очень хотел узнать новости по этому поводу - пиар есть, но кажется мертвым?

kadet1090 19 янв. 2020

👍2

Была ли эта страница полезной?

0 / 5 - 0 рейтинги

Смежные вопросы

Как насчет того, чтобы добавить несколько хуков в директиву v-on, например, «до» и «после».

Jokcy · 3Комментарии

Попытка получить доступ к несуществующему свойству externalHTML во время рендеринга

finico · 3Комментарии

Как добавить логику классов es6 в раздел методов?

6pm · 3Комментарии

Экземпляр $ dispatch не возвращает значение

hiendv · 3Комментарии

Функция: резервный контент для частичных файлов

bfis · 3Комментарии