삭제되지 않는 Vue 구성 요소 찾기

삭제되지 않는 Vue 구성 요소 찾기

앱을 로드하고 바로 Chrome 메모리 힙 스냅샷을 찍으면 다음과 같은 결과가 나옵니다.

웹 앱 주변을 클릭한 후 로드된 원래 페이지로 돌아가 메모리 힙 스냅샷을 다시 찍으면 다음과 같은 결과가 나타납니다.

이를 통해 Vue Component 수가 최대 10배 증가하고 Vue 인스턴스 수가 증가했음을 알 수 있습니다.

이는 앱의 메모리 사용량에 큰 영향을 미치고 있습니다.

파괴되지 않은 원인 컴포넌트를 추적하기 위해 사용할 수 있는 툴과 방법은 무엇입니까?

고립된 Vue 구성 요소 추적

질문에서 알 수 있듯이 이러한 메모리 문제는 청소되지 않은 Vue 컴포넌트가 원인이라는 것을 잘 알고 있었습니다.순환 참조 등을 위해 출처를 살펴볼 수 있습니다.수동으로 수정합니다.

코드 내 검색 범위를 좁힐 수 있도록 특정 Vue 컴포넌트를 찾는 방법을 찾고 있었습니다.

히프 스냅샷 사용

내가 찾은 가장 좋은 방법은 약간의 수작업이 필요하지만 꽤 잘 작동한다.

Chrome 개발 도구 힙 스냅샷에서 분리된 항목을 검색할 수 있습니다.

N.B. Vue를 운영이 아닌 개발용으로 컴파일해야 합니다. 그렇지 않으면 작동하지 않습니다.

DOM 에서 분리된 요소의 리스트가 표시됩니다.

이제 이러한 항목 중 하나를 클릭하여 강조 표시할 수 있습니다.

그런 다음 Chrome 개발 도구 콘솔로 이동하여$0원소를 얻으려고요

이것으로 로그인 페이지에서 입력된 이메일이 원인임을 알 수 있기 때문에 왜 이것이 파괴되지 않는지 조사해야 합니다.

결론

이렇게 하면 파괴되지 않은 컴포넌트를 추적할 수 있지만, 모든 컴포넌트를 추적할 수 있는 것은 아닙니다.detached노드가 잘못되었습니다. 앱의 컨텍스트를 적용하여 메모리 누수 여부를 확인하십시오.

언급URL : https://stackoverflow.com/questions/55498273/find-vue-components-not-being-destroyed