루트 전환 시 VueJ 메모리누전

루트 전환 시 VueJ 메모리누전

루트를 전환할 때마다 어플리케이션의 Vue 컴포넌트는 파기되지 않고 작성만 됩니다(루트를 전환할 때 # Deleted 컬럼은 항상0 입니다).특히 새로 생성된 컴포넌트 수는 항상 해당 루트에 표시되는 컴포넌트 수와 동일합니다.즉, Vue 컴포넌트는 모두 파기되지 않으며 루트를 다시 방문할 때 루트 상의 모든 컴포넌트가 재생성됩니다.

이 문제를 디버깅하기 위해 조사를 해 본 결과, VueJ의 메모리 누수의 원인은 다음과 같습니다.

• 글로벌 이벤트버스 사용 및 콜백 등록 해제 실패이것은 여기에 명확하게 설명되어 있습니다.어플리케이션의 일부 영역에서 글로벌이벤트 버스를 사용하고 있지만 글로벌이벤트 버스에 이벤트청취자를 작성하지 않은 페이지에서도 메모리 누수가 발생하고 있기 때문에 이 문제는 여기에서는 발생하지 않는다고 생각합니다.
• 서드파티 라이브러리를 사용할 때 수동으로 메모리를 청소할 수 없습니다.이 문제는 VueJS 매뉴얼에 설명되어 있습니다.서드파티 라이브러리를 사용하지 않는 페이지의 메모리 사용량을 조사했는데도 메모리 누수가 발생하고 있습니다.

내가 잘 이해하지 못하는 잠재적인 문제가 하나 더 있다.이 github 스레드에서 OP는 VueJ에서의 메모리 누수의 잠재적인 원인에 대해 다음과 같이 말했습니다.

그래서 제가 Vuex 스토어에 이 정보를 저장하는 바보 같은 짓은 하지 않았다는 걸 확인했죠

Vuex 및 메모리 누전에 관한 OP의 의미를 설명해 주시겠습니까?

또, VueJ의 메모리 누수의 원인이 되는 그 외의 잠재적인 문제로서 애플리케이션에 영향을 줄 가능성이 있는 것은 무엇입니까.

Chrome devtools의 메모리 탭을 사용하지 않고 메모리 누수를 디버깅하려면 어떻게 해야 합니까?

메모리는 디버깅하기 매우 귀찮고, 당신의 로그는 이상하게도 제 로그와 비슷합니다.

로그 주의: console.log(vuecompoent)는 실제로 컴포넌트를 메모리에 저장하고 릴리스하지 않습니다.

또한 vue dev 툴도 꺼놨지만 이것이 문제의 원인인지는 확실하지 않습니다.

리테이너 섹션을 확인합니다.이것은 당신에게 약간의 통찰력을 줄 것이다.

언급URL : https://stackoverflow.com/questions/51400373/vuejs-memory-leak-when-switching-routes