is this the Vue Memory Leak? #12968

tangjian1891 · 2025-02-28T10:13:19Z

tangjian1891
Feb 28, 2025

Memory Leak Differences in JS and Vue 3(Detached Nodes)

JS Example (Not a Memory Leak)

normal-js.mp4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Not a Memory Leak</title>
  </head>
  <body>
    <button onclick="add()">add div</button>
    <button onclick="remove()">clear all</button>
    <div id="box"></div>
    <script>
      const box = document.getElementById("box");
      function add() {
        let div = document.createElement("div");
        div.innerHTML = "Hello World";
        box.appendChild(div);
      }
      function remove() {
        box.innerHTML = "";
      }
    </script>
  </body>
</html>

JS Example (Memory Leak.because i store the div in an array )

detached-js.mp4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>detached-node</title>
  </head>
  <body>
    <button onclick="add()">add div</button>
    <button onclick="remove()">clear all</button>
    <div id="box"></div>
    <script>
      let arr = [];//remain reference
      const box = document.getElementById("box");
      function add() {
        let div = document.createElement("div");
        div.innerHTML = "Hello World";
        box.appendChild(div);
        arr.push(div);
      }
      function remove() {
        box.innerHTML = "";
      }
    </script>
  </body>
</html>

Vue3 Example (Using v-if) detached node

detached-vue3.mp4

<template>
  <button @click="flag = true">add div</button>
  <button @click="flag = false">clear all</button>
  <div id="box" v-if="flag">
    <div>Hello World1</div>
    <div>Hello World2</div>
    <div>Hello World3</div>
    <div>Hello World4</div>
    <div>Hello World5</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const flag = ref(false);
</script>

Vue3 Example (Using v-if)snapshots

snapshots-vue3.mp4

The same as code3

tangjian1891 · 2025-02-28T10:19:39Z

tangjian1891
Feb 28, 2025
Author

With continuous use ,my app has gotten bigger. The refreshing operation doesn't work. I need to open a new tab

2 replies

edison1105 Feb 28, 2025
Collaborator

please test those on Chrome v128.As far as I know Chrome has some bugs since v128.
see #12306

tangjian1891 Mar 1, 2025
Author

please test those on Chrome v128.As far as I know Chrome has some bugs since v128. see #12306

Thanks. It works. I will close the discussion

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

is this the Vue Memory Leak? #12968

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

Vue

is this the Vue Memory Leak? #12968

tangjian1891 Feb 28, 2025

Replies: 1 comment · 2 replies

tangjian1891 Feb 28, 2025 Author

edison1105 Feb 28, 2025 Collaborator

tangjian1891 Mar 1, 2025 Author

tangjian1891
Feb 28, 2025

Replies: 1 comment 2 replies

tangjian1891
Feb 28, 2025
Author

edison1105 Feb 28, 2025
Collaborator

tangjian1891 Mar 1, 2025
Author