[Vue] 컴포넌트가 destroyed를 호출하지 않고, created가 중복으로 되는 문제

jaypyon·2021년 11월 23일
0
  1. Tab에서 다른 컴포넌트를 띄워줄 때, Lifecycle Hook의 Created가 호출되고 Destroyed가 호출은 안되는 현상을 발견했다.
    이 현상이 조금 치명적인 오류로 다가왔는데, 마치 다중 스레드처럼 동작하며 동일 API를 호출해서 최상단 State의 정보를
    중복으로 업데이트 했다. Stack overflow의 글을 보고 해결했다.
  2. Destroyed가 되어도 해결되지 않는 이슈도 있었다. 이벤트를 정의해줄 때, 해당 document에 추가해줬기 때문에 일어난 버그였다.
  created() {
    document.addEventListener("wheel", this.onScroll);
    this.$log.debug("created:pending table");
  },
  destroyed() {
    document.removeEventListener("wheel", this.onScroll);
    this.$log.debug("destroyed:pending table");
  },

destroyed에 removeEventListener를 적용했고, 위 두가지 해결을 통해서 destroyed를 잘 호출하여 중복 created가 발생하지 않으며,
이벤트를 잘 제거해줬다.

profile
DGU CSE

0개의 댓글