Vue: Pérdida de memoria al usar componentes asíncronos

Creado en 31 ago. 2018  ·  3Comentarios  ·  Fuente: vuejs/vue

Versión

2.5.17

Enlace de reproducción

https://codesandbox.io/s/4k43rylw0

pasos para reproducir

  1. Cargue el reproductor y tome una instantánea del montón de memoria. Buscando en el montón encontrará 4 VueComponents (App, Container, Child, Async Child)
    image

  2. Haga clic en el botón Destruir. Esto alterna un v-if que eliminará el componente Child y, por lo tanto, el componente AsyncChild también.

  3. En este punto, la página se actualiza como se esperaba.
  4. Tome otra instantánea del montón de memoria. Vuelva a buscar en el montón "VueComponent" y verá que todavía existen 4 VueComponents
    image
    image

¿Lo que es esperado?

Después de destruir el componente hijo, el componente y su componente hijo cargado asincrónicamente deben destruirse y la memoria liberada.

¿Qué está pasando realmente?

Vue se aferra a una referencia de contexto que evita que estos componentes se recolecten como basura


Esto sucede debido a la lógica resolve-async-component que se encuentra aquí: https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/helpers/resolve-async-component.js#L57 -L68

En la función forceRender en la línea 64, después de llamar a $ forceUpdate, la matriz de contextos debe borrarse para liberar esas referencias para que los componentes puedan ser recolectados como basura en un momento posterior.

bug has PR

Comentario más útil

También puedo enviar un PR para solucionar este problema, gracias

Todos 3 comentarios

También puedo enviar un PR para solucionar este problema, gracias

Hola @LinusBorg

Veo que agregaste algunas etiquetas a este problema. ¿Hay algo más que deba hacer para iniciar el proceso de revisión de la solicitud de extracción a la que se hace referencia?

¡Gracias!

¿Fue útil esta página
0 / 5 - 0 calificaciones