Vue: Fuite de mémoire lors de l'utilisation de composants asynchrones

Version

2.5.17

Lien de reproduction

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

Étapes à suivre pour reproduire

1. Chargez le reproducteur et prenez un instantané du tas de mémoire. En recherchant le tas, vous trouverez 4 VueComponents (App, Container, Child, Async Child)
   

2. Cliquez sur le bouton Détruire. Cela bascule un v-if qui supprimera également le composant Child et donc le composant AsyncChild.

3. À ce stade, la page est mise à jour comme prévu
4. Prenez un autre instantané du tas de mémoire. Recherchez à nouveau "VueComponent" dans le tas et vous verrez que 4 VueComponents existent toujours
   
   

Qu'attend-on?

Après avoir détruit le composant enfant, le composant et son composant enfant chargé de manière asynchrone doivent être détruits et la mémoire libérée.

Que se passe-t-il réellement?

Vue tient à une référence de contexte qui empêche ces composants d'être ramassés

Cela se produit en raison de la logique de résolution-async-composant située ici: https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/helpers/resolve-async-component.js#L57 -L68

Dans la fonction forceRender à la ligne 64, après avoir appelé $ forceUpdate, le tableau des contextes doit être effacé pour libérer ces références afin que les composants puissent être récupérés ultérieurement.