Vue 지우기 타이머 setInterval 최적화 방안 공유

두 가지 방안은 타이머를 제거하고 개발자는 자주 방안 1을 사용하며 방안 2를 권장합니다.
시나리오 1
우선 데이터 함수에 타이머 이름을 정의합니다.

data() {      
  return {               
    timer: null //       
  }    
},

그런 다음 타이머를 사용합니다.

this.timer = (() => {
  //  
}, 1000)

마지막으로 beforeDestroy() 라이프 사이클에서 타이머를 지웁니다.

beforeDestroy() {
  clearInterval(this.timer);    
  this.timer = null;
}

방안 1은 두 가지 좋지 않은 점이 있는데 특히 큰 말을 인용하면 다음과 같다.
이 구성 요소의 실례에 이timer를 저장해야 합니다. 가능하다면 생명주기 갈고리만 접근할 수 있는 것이 좋습니다.이것은 결코 심각한 문제가 아니지만, 그것은 잡동사니로 간주될 수 있다.
우리의 구축 코드는 우리의 정리 코드에 독립되어 있기 때문에 우리는 우리가 구축한 모든 것을 프로그램적으로 정리하기 어렵다.
시나리오 2
이 방법은 $once 이벤트 탐지기를 통해 타이머를 정의한 후의 위치를 제거하는 것입니다.
다음은 전체 코드입니다.

const timer = setInterval(() =>{          
  //          
}, 500);      
//  $once ， beforeDestroy 。
this.$once('hook:beforeDestroy', () => {      
  clearInterval(timer);                  
})

기타 프로그램화된 이벤트 탐지기
$on(eventName, eventHandler)을 통해 이벤트 수신
$once(eventName, eventHandler)를 통해 이벤트를 한 번에 정탐
$off(eventName, eventHandler)를 통해 이벤트 수신을 중지합니다.
부록 홈페이지 상세주소:프로그램 이벤트 탐지기
추가 지식: vue가 mounted에서 타이머 만들기 및 타이머 지우기
나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.

mounted(){
   var that=this;
    var num = 1;
    var ss='';
   var a=setInterval(()=>{
    a+=10;
     if(this num===100){
      ss='success';
      console.log(ss)  
    			clearInterval(a)  // num 100 
   } 
   }, 1000); 
  }

이상의 Vue 타이머 제거 set Interval 최적화 방안 공유는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희도 많이 사랑해 주세요.