Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

265
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda