Это утечка памяти Vue. js?

Question

Вот код компонента:

import { defineComponent, ref } from "@vue/composition-api";

const template = /* html */ `
<div>
  <nav>
    <button @click="showCanvas = !showCanvas">Toggle</button>
  </nav>a
  <canvas v-if="showCanvas" width="1000" height="1000" style="width: 50%; height: auto; background-color: #eee"></canvas>
</div>
`;

export default defineComponent({
  name: "SimpleIf",
  template,
  setup() {
    return {
      showCanvas: ref(true)
    };
  }
});

Существует только <canvas> с <button>, который показывает или скрывает холст.

Я использую Vue 2 с API композиции.

В Firefox я открываю инструменты разработки. На вкладке «Память» я делаю снимок. Я устанавливаю представление «Агрегирование» и фильтрую с помощью «Холста»:

Число HTMLCanvasElement равно 1 . Теперь я нажимаю на кнопку несколько раз, затем снова делаю снимок:

Число HTMLCanvasElement равно 9 .

Почему?

Обратите внимание: я сделал этот тест, потому что у меня есть необъяснимая утечка памяти с огромным холстом в реальном приложении. Я хотел бы понять, как Vue очищает неиспользуемые элементы DOM и почему мои все еще находятся в памяти.

Answer 1

Провел небольшое исследование в песочнице в обоих - Chrome и Firefox, определенно создаются новые элементы Canvas, однако они должным образом удаляются через некоторое время - когда Сборщик мусора собирает их (вы можете заставить FF сделать это со страницы about: memory ). Не может воспроизвести утечку дольше 20-30 секунд.

Насколько я знаю, Vue не использует элементы v-if , он всегда воссоздается. Так может быть попробовать вместо этого v-show ?