Vue: 비동기 구성 요소를 사용할 때 메모리 누수

버전

2.5.17

복제 링크

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

재현 단계

1. 재현기를로드하고 메모리 힙 스냅 샷을 만듭니다. 힙을 검색하면 4 개의 VueComponents (App, Container, Child, Async Child)를 찾을 수 있습니다.
   

2. 파괴 버튼을 클릭합니다. 그러면 자식 구성 요소와 AsyncChild 구성 요소도 제거되는 v-if가 토글됩니다.

3. 이 시점에서 페이지는 예상대로 업데이트됩니다.
4. 다른 메모리 힙 스냅 샷을 작성하십시오. 힙에서 "VueComponent"를 다시 검색하면 4 개의 VueComponent가 여전히 존재하는 것을 볼 수 있습니다.
   
   

무엇을 기대합니까?

Child 컴포넌트를 소멸 한 후 컴포넌트와 비동기 적으로로드 된 하위 컴포넌트를 소멸하고 메모리를 확보해야합니다.

실제로 무슨 일이 일어나고 있습니까?

Vue는 이러한 구성 요소가 가비지 수집되는 것을 방지하는 컨텍스트 참조를 보유하고 있습니다.

이는 https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/helpers/resolve-async-component.js#L57-L68에있는 resolve-async-component 로직으로 인해 발생합니다.

64 행의 forceRender 함수에서 $ forceUpdate를 호출 한 후 컨텍스트 배열을 지워서 해당 참조를 해제해야 구성 요소가 나중에 가비지 수집 될 수 있습니다.