How to set and clear timer and problems encountered in VUE

Method 1: Clear the life cycle function beforeDestroy

data() {
    return {
      timer: null;
    };
},
created() {    
    // Set the timer and execute it once in 5 seconds     = setInterval(() => {
      ('setInterval');
    }, 5000);
}
beforeDestroy () {
    //Clear the timer    clearInterval();
     = null;
}

Method 2: Use hook: beforedestroy (recommended)

created() {    
    // Set the timer and execute it once in 5 seconds    let timer = setInterval(() => {
      ('setInterval');
    }, 5000);
 
    // Destroy the timer when leaving the current page    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer);
      timer = null;
    })
}

This method is the same as the operation principle of clearing the timer in the life cycle hook beforeDestroy, but it has more advantages

1. No need to define timers on vue instances to reduce unnecessary memory waste

2. Put the code to set and clear the timer together, and the readability and maintenance are better

3. The situation where beforeDestroy function is not triggered

1. Cause

<router-view>The outer layer is wrapped with a layer of <keep-alive>

< keep-alive > has the function of caching, which can keep the wrapped component state unchanged, and does not go through the beforeDestroy life cycle when the route is cached by keep-alive. Being included in

Components created in < keep-alive > will have two additional life cycle hooks: activated and deactivated.

activated

Called when the component is activated, it is also called when the component is rendered for the first time, and then it is called every time keep-alive is activated.

deactivated

Called when component is inactive.

2. Solution

Set and clear timers with activated and deactivated hooks

(1) Life cycle hook

created() {
    // Set timer when page activation    this.$on("hook:activated", () => {
        let timer = setInterval(()=>{
          ("setInterval");
        },1000)
    })
 
    // Clear the timer when the page is inactive    this.$on("hook:deactivated", ()=>{
      clearInterval(timer);
      timer = null;
    })
  }

(2)hook

data() {
    return {
      timer: null // Timer    }
},
activated() {
    // Turn on the timer when the page is activated     = setInterval(() => {
      ('setInterval');
    }, 5000)
},
deactivated() {
    // Clear the timer when the page is closed (routing jump)    clearInterval()
     = null
},

Attachment: vue leaves page to destroy timer

vue is a single page application. After routing switching, the timer will not be automatically closed and needs to be manually cleared. When the page is destroyed, just clear the timer.

data: {
    return {
        timer: null
    }
},
created() {
     = setInterval(....);
},
beforeDestroy() {
    if() { //If the timer is still running or is turned off directly, there is no need to judge        clearInterval(); //closure    }
}

Summarize

This is the end of this article about VUE settings and clear timers. For more related VUE settings and clear timers, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!