Tengo dos componentes de página y cada uno tiene dos datos locales... en el ciclo de vida "creado", asigno algún valor a estos datos y luego cambio la ruta entre estas dos páginas... desde la pestaña de memoria en la herramienta de desarrollador puedo ver el montón el tamaño de la memoria aumentará con cada cambio de ruta, pero hasta donde yo sé, vue debería eliminar todos los datos relacionados con el componente destruido, pero ese no es el caso aquí.
~/páginas/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>~/páginas/contacto.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>*** si agrego el siguiente código a estas dos páginas, ahora la memoria no aumentará, pero vue debería liberar la memoria por sí misma y dentro del ciclo de vida 'destruido' 'esto. <algunos datos' no deberían estar definidos:
beforeDestroy() { this.str = undefined; this.testArr = undefined; },¿Cómo puedo optimizar mi aplicación para liberar memoria cuando el componente se destruye y no almacenar datos relacionados con el componente destruido en la memoria?
siguiente versión "2.15.8"
versión vue "2.6.14"