是 Vue.js 的内存泄漏吗？答案

【问题标题】：Is it a memory leak of Vue.js?是 Vue.js 的内存泄漏吗？
【发布时间】：2020-07-01 18:23:52
【问题描述】：

这是一个组件的代码：

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 元素以及为什么我的仍然在内存中。

【问题讨论】：

标签： javascript vue.js dom canvas memory-leaks

【解决方案1】：

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

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

【讨论】：