这是Vue.js的内存泄漏吗？

Question

bounty到期在7天内。该问题的答案有资格获得+ 500声望赏金。Paleo想要引起更多关注对此问题。

这里是组件的代码：

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中都对sandbox进行了一些研究，肯定创建了新的Canvas元素，但是在Garbage Collector