Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how Vue elegantly clears the timer". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to elegantly clear the timer of Vue" can help you solve the problem.

Preface

Clear the timer. I believe a considerable number of people have written this:

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

This is a common piece of code, and at least several of my friends (with 1-3 years of experience) have written it, and there are three inelegant problems:

Timer is null without emptying after clearInterval.

The code to start the timer and clear the timer is scattered in two places, compromising readability / maintainability, which makes it more difficult for us to programmatically clean up what we have built.

Timer is defined in data, in fact, timer does not need any responsive operation, definition in data is not necessary, but a waste of performance.

Optimize

Go directly to the code:

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

Here, hook is used to monitor the beforeDestroy lifecycle, so that the timer only needs to be defined in the lifecycle, and all the above problems are solved.

Spin-off problem: beforeDestroy is not triggered?

In the background system, we often set the page cache, but when the route is cached by keep-alive, it does not go through the beforeDestroy life cycle, so some partners think that the timer is cleared in beforeDestroy, and they don't even check it. In fact, the timer is not cleared. Knowing the reason is easy to solve, with the help of two raw hooks, activated and deactivated:

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

Note here that you need to use $on instead of $once because of caching, otherwise it won't be triggered again after one execution.

This is the end of the introduction to "how to gracefully clear the timer in Vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.