Vue 페이지 감청 사용자 미리 보기 시간 기능 구현 코드

최근 업무 에 서 는 이러한 수요 와 관련 되 어 있 습 니 다.온라인 교육 시스템 은 사용자 가 특정한 온라인 미리 보기 페이지 에 대해 사용자 의 미리 보기 시간 을 추적 하 는 것 을 알 아야 합 니 다.초보 적 으로 우 리 는 먼저 Vue 페이지 의 생명주기 함수mounted와destroyed를 빌려 각각 시간 계산 시작 과 시간 계산 제거 논 리 를 넣 고 백 엔 드 의 인 터 페 이 스 를 통 해 해당 하 는 교육 소재 의 시간 데 이 터 를 보고 하면 목적 을 달성 할 수 있다.
생각 이 있 으 면 우 리 는 구체 적 인 코드 를 계획 하기 시작 할 수 있다.
정의 시작 종료 시간 함수data에서 우 리 는 변 수 를 통 해 타 이 머 를 정의 합 니 다.그러면this.timer어디서나 접근 할 수 있 고 나중에 페이지 를 소각 할 때 지 울 수 있 습 니 다.duration시간 이 긴 계수 변 수 는 0 으로 초기 화 되 며 타이머 의 두 번 째 시간 간격 매개 변수 에 따라 단위 가 초 인지 밀리초 인지 결정 할 수 있 습 니 다.

export default {
  data() {
    return {
      timer: null,
      duration: 0
    }
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        console.log('    : ', this.duration)
        this.duration++
      }, 1000)
    },
    stopTimer() {
      clearInterval(this.timer)
      this.updateViewHistory() //       
    },
    updateViewHistory() {
    //         
    ....
    }
  }
}

startTimer함수 에서 우 리 는 표시 시간 이 정확 한 지 검증 하기 위해duration변 수 를 출력 합 니 다.
어떻게
끝 을 시작 하 는 방법 을 정 의 했 으 니 어디서 호출 할 지 생각해 보 자.미리 보 는 페이지 내용 이 유일한 것 이 아니 라 소재id에 따라 상세 한 정 보 를 얻 고 렌 더 링 하기 때 문 입 니 다.만약 우리 가startTimer생명 주기 에mounted를 쓴다 면,우리 가 서로 다른id페이지 를 방문 할 때,우리 가 원 하 는 논 리 를 정상적으로 전환 할 수 없다.
그래서 저 는 감청 경로 의id인 자 를 통 해 서로 다른 페이지 를 미리 볼 때 시작 과 끝 을 바 꾸 는 논 리 를 선 택 했 습 니 다.

watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        if (to.params.id) this.trainingId = to.params.id
        this.startTimer()
      }
    }
  }

시간 을 재 는 방법 을 호출 하여 마침내 우 리 는console의log에서 현재 출력 시간 을 볼 수 있 습 니 다.

그리고 마지막 단계 입 니 다.우 리 는 페이지 가 삭 제 될 때stopTimer함 수 를 호출 하여 타 이 머 를 제거 하고 데 이 터 를 보고 해 야 합 니 다.
우리 의 미리 보기 페이지 는window.open을 통 해 열 린 독립 된 탭 이기 때문에destroyed수명 주기 함수 로 감청 합 니 다.만약 에 경로 방법 을 통 해 점프 를 한다 면 우 리 는 페이지 를 떠 날 때 소각 해 야 다시destroyed를 통 해 감청 할 수 있다.

mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  }

window의 감청 기 방법 을 통 해 간접 호출stopTimer방법

methods: {
    beforeunloadHandler (e) {
      this.stopTimer()
    }
}

destroyed에서stopTimer방법 을 직접 사용 하지 않 는 이 유 를 묻 는 사람 이 있다.그러면 특유 의 논 리 를 분리 하고destroyed의 다른 논리 와 섞 이지 않 는 다.코드 의 가 독성 과 유지보수 성 을 높이다.
코드 를 쓸 때 우 리 는 기능 을 실현 해 야 할 뿐만 아니 라 더 많은 것 을 생각해 야 한다.이것 이 바로 일반 과 고수 의 차이 이다.
Vue 페이지 감청 사용자 의 미리 보기 시간 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 감청 사용자 의 미리 보기 시간 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 사랑 해 주세요!