Memory leak with component with input with v-model #10004

posva · 2019-05-09T16:59:33Z

Version

2.6.10

Reproduction

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>

    <div id="app">
      <div id="nav">
        <button @click="goHome">go to Home</button>
        <button @click="goAbout">go to About</button>
      </div>
      <component :is="current"></component>
    </div>

    <script>
      const Home = {
        name: 'Home',
        template: `
      <div>
        <h2>Home</h2>
      </div>
      `,
      }

      const About = {
        template: `
        <div class="about">
    <h1>This is an about page</h1>
    <input type="text" v-model="input">
  </div>
      `,
        name: 'about',
        data: () => ({
          input: '',
        }),
      }

      const vm = new Vue({
        el: '#app',
        data() {
          return {
            current: 'Home',
          }
        },

        methods: {
          goHome() {
            this.current = 'Home'
          },
          goAbout() {
            this.current = 'About'
          },
        },
        components: { Home, About },
      })
    </script>
  </body>
</html>

Steps to reproduce

go to the about page
type in the input
leave the page
collect garbage and take a snapshot with devtools

What is expected?

VueComponent count should be stable

What is actually happening?

VueComponent count keeps increasing.

seems to be related to typing in the input

ricardo-lobo · 2019-05-09T22:37:30Z

@posva After further testing. This might not be Vue's fault.

Testing the code above on Chrome Version 72.0.3626.121 (mac) seems to run without any issues and VueComponent count is stable.

posva · 2019-05-10T06:44:47Z

it isn't in 74. It could be a bug on Chrome. I've found leaks in the past (https://bugs.chromium.org/p/chromium/issues/detail?id=949587). I didn't test with this one though as it looks like Vue is retaining the component and the browser cannot free it

kizivat · 2019-05-10T08:21:23Z

I can confirm this happens in Chrome 74. When trying to replicate this in Safari, I cannot even see any Vue related objects in their JS allocations inspector, but that is probably just my mistake somehow.

However, if this doesn't happen in the earlier versions of Chrome with the same Vue version, this could be probably forwarded to Chromium project and closed here?

andysoa · 2019-05-10T09:09:22Z

This is especially critical when we talk about large SPA's with tones of data. As far as I can see Chrome 74 is not able to collect much...

andysoa · 2019-05-14T21:55:25Z

https://bugs.chromium.org/p/chromium/issues/detail?id=961494

There is some development regarding this issue.

KyLeoHC · 2019-05-22T09:47:43Z

Recently I have found that there is a problem while input element work with 'v-model'. If I type the content quickly, it cause the high CPU usage.

diazemiliano-zz · 2019-05-23T18:12:52Z

@posva or anyone knows how to test this with FF devtools and EDGE devtools?
Because we don't have the constructors names in those.
This is happening in other browsers like chrome and ff too.
Thanks.

zrh122 · 2019-05-30T08:12:02Z

@posva, i just found out PR #10085 can fix it, my Chrome Version is 74.0.3729.169.

posva · 2019-05-30T09:00:23Z

Thanks for checking it out!

clopezcapo · 2019-07-01T10:21:51Z

Does anybody know if this also happens in the PROD version? As I am not able to filter by "vue" components in Chrome DevTools. I see the same code as the dev version though...

ricardo-lobo · 2019-07-01T10:28:57Z

Does anybody know if this also happens in the PROD version? As I am not able to filter by "vue" components in Chrome DevTools. I see the same code as the dev version though...

@clopezcapo Yes it does.

clopezcapo · 2019-07-01T10:35:32Z

Bufff, and isn't that a huge issue for PROD environments? It looks like is a serious potential killer to me.

Does anybody know if they are aware?

clopezcapo · 2019-07-01T11:17:05Z

@posva can you please update us on the status of this fix? As still happens in PROD.

istobran · 2019-07-02T01:52:17Z

this issue is too serious, it take me a long time to find it out...

lianzhao · 2019-08-01T09:27:09Z

So... any workarounds so far? Downgrade to v2.6.9?

novakjcn · 2020-02-14T10:54:08Z

I can confirm that PR #10085 fixes it for us as well. Is there a plan to merge this?

bigghhz · 2020-03-03T08:37:13Z

I also tried this solution, but only half of it worked. chrome80/vue2.6.11/vue-router 3.0.
While vue component has been successfully recycled, three additional listeners have not been removed and dom cannot be recycled. Looking at the heap snapshot,the VueComponent increment is 0, but htmlInputElement has not been recycled, as Performance tools proves. I tracked that these 3 listeners comes from "vue/src/platforms/web/runtime/directs/model.js"-->function onCompositionStart and onCompositionEnd, But I'm not familiar with vue source code .
when input element is deep in a large component, this leads to a large memory leak.

MarMun · 2020-11-16T12:55:38Z

As a workaround, I wrap my inputs to:

manually add / remove event listeners
'detach' the input from component DOM on beforeDestroy

This way 'only' the inputs (which have been edited) itself leak and not the whole component / view.

Simplified:

<template>

  <div id="nativeInputContainer">
    <input
      ref="nativeInput"
      id="nativeInput"
      v-bind:type="(password) ? 'password' : ''"
      v-bind:placeholder="placeholder"
      v-bind:value="workingValue"
    />
  </div>

</template>

<script>

export default {
  name: 'BaseInput',
  inheritAttrs: false,
  components: {},
  props: {
    placeholder: {
      type: String,
      required: false,
      default: () => { return '' }
    },
    value: {
      type: String,
      required: true
    },
    password: {
      type: Boolean,
      required: false,
      default: () => { return false }
    }
  },
  data () {
    return {
      workingValue: ''
    }
  },
  watch: {

    value: {
      immediate: true,
      handler () {
        this.workingValue = this.value
      }
    }

  },
  methods: {

    onInput (event) {
      this.workingValue = event.target.value
      this.$emit('input', this.workingValue)
    },

    onChange (event) {
      this.$emit('change', this.workingValue)
    }

  },
  mounted () {
    // to avoid memory leak (from vue)
    // we assign event listeners manually
    this.$nextTick(() => {
      this.$refs.nativeInput.addEventListener('input', this.onInput)
      this.$refs.nativeInput.addEventListener('change', this.onChange)
    })
  },
  beforeDestroy () {
    // to avoid memory leak (from vue)
    // we remove event listeners manually
    this.$refs.nativeInput.removeEventListener('input', this.onInput)
    this.$refs.nativeInput.removeEventListener('change', this.onChange)

    // to avoid memory leak (from input itself)
    // which causes 'this' to be not available for gc
    // (undo history keeps input alive)
    // see: https://bugs.chromium.org/p/chromium/issues/detail?id=961494#c14
    this.$el
      .querySelector('#nativeInputContainer')
      .removeChild(
        this.$el.querySelector('#nativeInput')
      )
    // maybe not necessary but "always Double Tap"
    this.$refs.nativeInput = null
  }

}
</script>

<style scoped>
</style>

yosinch · 2021-06-09T05:14:05Z

Thanks for using Chrome! And sorry for bothering you... m(_ _)m

Chrome Canary 93.0.4535.2 (at leas) clears undo stack for removed , <textarea> content editable. So, undo stack is no more source of memory leak. (http://crbug.com/961494)

I attempt to take memory snapshot for posva's sample. Retainers of "Detached HTMLInputElemnt" are:

ShadowRoot
Detached HTMLInputElement
Detached HTMLDivElement
Detached Text
elm in VNode from vue:767
Blink roots
Blink roots

Note: You can make ShadowRoot to detached by <input>.value = '' (remove Text node) and <input>.type ='hidden' (remove ShadowRoot)

I'm not sure Blink roots of 6 and 7. One of Blink roots may be caused by <input>.focus().

Anyway, Detached HTMLInputElement is only one, so memory issue is mitigated.

posva added the bug label May 9, 2019

posva mentioned this issue May 9, 2019

Memory leak while simply changing routes #10002

Closed

posva added the has PR label May 30, 2019

zrh122 mentioned this issue May 30, 2019

fix(v-on): add removing all dom event listeners when vnode destroyed #10085

Merged

13 tasks

This was referenced Jul 1, 2019

IMPORTANT! Memory leak in PROD version #10213

Closed

Memory leak in PROD version #10214

Closed

zrh122 mentioned this issue Jul 10, 2019

Elements increase when adding data and changing views #10249

Closed

posva mentioned this issue Sep 21, 2019

nested dynamic components occur memory leaks #10544

Closed

rocka mentioned this issue Apr 7, 2020

[Bug] Memory leak when switch page & all sort of things Rocket1184/electron-netease-cloud-music#78

Closed

posva mentioned this issue Aug 17, 2020

Operation input box,after leaving the page, the component data is not released #11600

Closed

This comment has been minimized.

Sign in to view

posva closed this as completed in #10085 Aug 5, 2021

trc-mathieu mentioned this issue Jun 28, 2022

fix(b-form-input): Fix memory leak with input element. trc-mathieu/bootstrap-vue#1

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Memory leak with component with input with v-model #10004

Memory leak with component with input with v-model #10004

posva commented May 9, 2019

ricardo-lobo commented May 9, 2019

posva commented May 10, 2019

kizivat commented May 10, 2019

andysoa commented May 10, 2019

andysoa commented May 14, 2019

KyLeoHC commented May 22, 2019

diazemiliano-zz commented May 23, 2019 •

edited

Loading

zrh122 commented May 30, 2019

posva commented May 30, 2019

clopezcapo commented Jul 1, 2019 •

edited

Loading

ricardo-lobo commented Jul 1, 2019 •

edited

Loading

clopezcapo commented Jul 1, 2019

clopezcapo commented Jul 1, 2019

istobran commented Jul 2, 2019 •

edited

Loading

lianzhao commented Aug 1, 2019

novakjcn commented Feb 14, 2020

bigghhz commented Mar 3, 2020

This comment has been minimized.

MarMun commented Nov 16, 2020 •

edited

Loading

yosinch commented Jun 9, 2021

Memory leak with component with input with v-model #10004

Memory leak with component with input with v-model #10004

Comments

posva commented May 9, 2019

Version

Reproduction

Steps to reproduce

What is expected?

What is actually happening?

ricardo-lobo commented May 9, 2019

posva commented May 10, 2019

kizivat commented May 10, 2019

andysoa commented May 10, 2019

andysoa commented May 14, 2019

KyLeoHC commented May 22, 2019

diazemiliano-zz commented May 23, 2019 • edited Loading

zrh122 commented May 30, 2019

posva commented May 30, 2019

clopezcapo commented Jul 1, 2019 • edited Loading

ricardo-lobo commented Jul 1, 2019 • edited Loading

clopezcapo commented Jul 1, 2019

clopezcapo commented Jul 1, 2019

istobran commented Jul 2, 2019 • edited Loading

lianzhao commented Aug 1, 2019

novakjcn commented Feb 14, 2020

bigghhz commented Mar 3, 2020

This comment has been minimized.

MarMun commented Nov 16, 2020 • edited Loading

yosinch commented Jun 9, 2021

diazemiliano-zz commented May 23, 2019 •

edited

Loading

clopezcapo commented Jul 1, 2019 •

edited

Loading

ricardo-lobo commented Jul 1, 2019 •

edited

Loading

istobran commented Jul 2, 2019 •

edited

Loading

MarMun commented Nov 16, 2020 •

edited

Loading