title: Is it a memory leak of Vue.js?
body: <p>Here is the code of a component:</p>
  
  <pre><code>import { defineComponent, ref } from "@vue/composition-api";
  
  const template = /* html */ `
  &lt;div&gt;
    &lt;nav&gt;
      &lt;button @click="showCanvas = !showCanvas"&gt;Toggle&lt;/button&gt;
    &lt;/nav&gt;a
    &lt;canvas v-if="showCanvas" width="1000" height="1000" style="width: 50%; height: auto; background-color: #eee"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  `;
  
  export default defineComponent({
    name: "SimpleIf",
    template,
    setup() {
      return {
        showCanvas: ref(true)
      };
    }
  });
  </code></pre>
  
  <p>There is just a <code>&lt;canvas&gt;</code>, with a <code>&lt;button&gt;</code> that shows or hides the canvas.</p>
  
  <p>I use Vue 2 with the composition API.</p>
  
  <p>In Firefox, I open the dev tools. In the "Memory" tab, I take a snapshot. I set the view to "Aggregate" and I filter with "Canvas":</p>
  
  <p><a href="https://i.stack.imgur.com/slHgn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/slHgn.png" alt="Screenshot before"></a></p>
  
  <p>The number of <code>HTMLCanvasElement</code> is <strong>1</strong>. Now, I click on the button several times then I take a snapshot again:</p>
  
  <p><a href="https://i.stack.imgur.com/ycegx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ycegx.png" alt="Screenshot after"></a></p>
  
  <p>The number of <code>HTMLCanvasElement</code> is <strong>9</strong>.</p>
  
  <p>Why?</p>
  
  <p>Notice: I made this test because I have an unexplained memory leak with huge canvas in a real application. I would like to understand how Vue cleans unused DOM elements and why mine still are in memory.</p>