Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

264
Views
nuxt/vue memory management and destroyed life cycle

I have two page components and each one has two local data ... in "created" life cycle I assign some value to these data then I change route between these two pages ... from the memory tab in developer tool I can see heap memory size will increase with each route change but as far as I know vue should remove all data related to destroyed component but that's not the case here.

~/pages/index.vue:

<template>
  <nuxt-link to="/contact">contact</nuxt-link>
</template>
<script>
export default {
  data() {
    return {
      testArr: [],
      str: "...", //assign very large string 
    };
  },
  created() {
    for (let i = 0; i < 100000; i++) {
      this.testArr.push({ //just to make this array as big as possible
        key1: this.str,
        key2: this.str,
        key3: this.str,
        key4: this.str,
        key5: this.str,
      });
    }
  },
  destroyed() {
    //although we are inside destroyed life cycle we can still access to 
    //this.str,this.testArr
    console.log("destroyed");
  },
};
</script>

~/pages/contact.vue:

<template>
  <nuxt-link to="/">home</nuxt-link>
</template>
<script>
export default {
  data() {
    return {
      testArr: [],
      str: "...", //assign very large string 
    };
  },
  created() {
    for (let i = 0; i < 100000; i++) {
      this.testArr.push({ //just to make this array as big as possible
        key1: this.str,
        key2: this.str,
        key3: this.str,
        key4: this.str,
        key5: this.str,
      });
    }
  },
  destroyed() {
    //although we are inside destroyed life cycle we can still access to 
    //this.str,this.testArr
    console.log("destroyed");
  },
};
</script>

***if I add bellow code to both of these pages now memory will not increase but vue should release memory by itself and inside 'destoryed' life cycle 'this.<some-data' should be undefined:

beforeDestroy() {
    this.str = undefined;
    this.testArr = undefined;
  },

how can I optimize my app to release memory when component gets destroyed and not hold data related to the destroyed component in memory?

nuxt version "2.15.8"
vue version "2.6.14"

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!