是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>，带有一个显示或隐藏 canvas 的 <button>。

我使用 Vue 2 和组合 API。

在 Firefox 中，我打开开发工具。在 "Memory" 选项卡中，我拍了一张快照。我将视图设置为 "Aggregate" 并使用 "Canvas":

进行过滤

HTMLCanvasElement的人数是1。现在，我点击按钮几次，然后再次拍摄快照：

HTMLCanvasElement的人数是9。

为什么？

注意：我做这个测试是因为我在一个真实的应用程序中有一个巨大的 canvas 无法解释的内存泄漏。我想了解 Vue 如何清理未使用的 DOM 元素以及为什么我的元素仍在内存中。

Answer 1

在 sandbox 中对 Chrome 和 Firefox 进行了一些研究，肯定有新的 Canvas 元素正在创建，但是它们会在一段时间后被正确删除 -当 Garbage Collector 收集它们时（您可以强制 FF 从 about:memory 页面执行此操作）。无法重现超过 20-30 秒的泄漏。

据我所知，Vue 不会重用 v-if 元素，它总是被重新创建。那么可以试试 v-show 吗？

是Vue.js的内存泄漏吗？

Is it a memory leak of Vue.js?

javascript

dom

memory-leaks

canvas

vue.js