Vue 어떻게 우아 하 게 타이머 제거

머리말
타이머 지우 기,상당 수 사람들 이 이렇게 썼 을 거 라 고 믿 습 니 다:


export default {
  data() {
    reurn {
      timer: null
    }
  },
  
  mounted() {
    this.timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
  },
  
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

이것 은 흔히 볼 수 있 는 코드 입 니 다.적어도 제 주변 에 있 는 몇 명의 동료(1-3 년 경험 이 있 는 사람)들 은 모두 이렇게 썼 습 니 다.여기 에는 우아 하지 않 은 문제 가 세 가지 존재 합 니 다.

clearInterval 이후 timer 를 null 로 비우 지 않 았 습 니 다.

4.567917.타 이 머 를 켜 고 타 이 머 를 제거 하 는 코드 는 두 곳 에 분산 되 어 있 고 가 독성/유지 성 을 손상 시 킵 니 다.특히 크게 말 하면 우 리 는 우리 가 만 든 것 을 절차 적 으로 정리 하기 어렵 습 니 다

timer 는 data 에 정의 되 어 있 습 니 다.실제로 timer 는 응답 식 조작 이 필요 하지 않 습 니 다.data 에 정의 하 는 것 은 필요 하지 않 고 오히려 성능 낭 비 를 초래 합 니 다

최적화 하 다.
직접 코드 올 리 기:


export default {
  data() {
    reurn {
    }
  },
  
  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
      timer = null
    })
  }
}

여 기 는 hook 감청 beforeDestroy 라 이 프 사이클 을 사용 합 니 다.그러면 timer 는 라 이 프 사이클 에 정의 되 기만 하면 이상 의 문 제 를 모두 해결 할 수 있 습 니 다.
파생 문제:beforeDestroy 가 촉발 되 지 않 았 습 니까?
배경 시스템 에서 우 리 는 페이지 캐 시 를 자주 설정 합 니 다.경로 가 keep-alive 캐 시 에 있 을 때 beforeDestroy 의 생명 주 기 를 가지 않 기 때문에 일부 동료 들 은 beforeDestroy 에서 타 이 머 를 지우 면 끝 날 것 이 라 고 생각 하고 심지어 검사 도 하지 않 았 습 니 다.실제로 타 이 머 는 제거 되 지 않 았 습 니 다.이 유 를 알 면 해결 할 수 있 습 니 다.activated 와 deactivated 라 는 두 개의 생 갈 고 리 를 통 해:


export default {
  data() {
    reurn {
    }
  },
  
  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$on('hook:activated', () => {
      if (timer === null) { //          
        timer = setInterval(() => {
          console.log('setInterval')
        }, 2000)
      }
    })
    this.$on('hook:deactivated', () => {
      clearInterval(timer)
      timer = null
    })
  }
}

캐 시 때문에$once 가 아 닌$on 을 사용 해 야 합 니 다.그렇지 않 으 면 한 번 실행 하면 다시 실행 되 지 않 습 니 다.
Vue 가 어떻게 우아 하 게 타 이 머 를 지 우 는 지 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 타 이 머 를 지 우 는 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!

Vue 어떻게 우아 하 게 타이머 제거

좋은 웹페이지 즐겨찾기