Vue 구성 요소가 두 번 파괴됨

Vue 구성 요소가 두 번 파괴됨

로그아웃 시 구성 요소의 수명 주기 제거 후크가 호출됩니다.방금 로그아웃한 동일한 브라우저 세션에서 로그인하면 새 인스턴스가 생성/마운트되기 전에 동일한 구성 요소가 다시 삭제됩니다.이는 해당 구성 요소에서 사용 중인 라이브러리에 문제가 있기 때문입니다.

예:

첫 번째 로그인:

Component Created ID1
Component Mounted ID1 Then logout:
Component Before Destroy ID1
Component Destroyed ID1 So everything so far is correct. Now log back in as a different user:
Component Created ID1
Component Mounted ID1
Component Before Destroy ID 1 
(Library fails to destroy here because things are now undefined from previous destroy
Component Destroyed ID1
Component Created ID2
Component Mounted ID2

제 코드는 vuex 기능을 사용하여 로그아웃하는 것입니다.기본적으로 깨끗한 '기본 개체'에 대한 deepClone을 수행하여 많은 vuex 모듈을 제거하는 이벤트를 발송한 다음 라우터를 실행합니다.로그아웃 화면으로 푸시

당사의 모든 구성 요소가 이러한 방식으로 생성/마운트되고 있음을 알게 되었습니다.라이브러리가 마지막 삭제에서 삭제한 항목에 액세스하려고 하므로 구성 요소에 오류가 발생합니다.

킵얼라이브를 다 꺼냈는데 아직도 그런 일이 벌어지고 있어요.여러분은 이 라이프사이클의 행동이 정상적인지 알고 있나요?저는 이상하게 생각합니다.

편집:

그래서 범인을 찾았습니다.우리 안에서App.Vue우리는 있습니다.<router-view v-else>v-else가 실패하기 때문에 Vue는 로그인할 때 내 구성 요소를 렌더링합니다. v-else가 다시 True가 될 때까지 Vue를 다시 제거합니다.

해봤습니다.v-if하지만 효과가 없는 것 같습니다.

제가 v-show로 바꿨더니 문제가 해결되었습니다.Vue는 구성 요소를 해체하고 다시 마운트하는 대신 CSS로 숨길 것입니다.

언급URL : https://stackoverflow.com/questions/57211521/vue-component-being-destroyed-twice