Description: I’m just a small front-end entry, you can guide me, but do not spray me, although I know I am very garbage! People? They all have to grow up! Big brother, please give more advice!!

Some time ago, I just wrote a project similar to the surplus stock, the k-chart above is to refresh in real time, so we need to use VUE to do a heartbeat, of course, we can also choose to use Websocket, big people feel it must be very simple, but I am just a small front-end, hereby record.

Train of thought

In fact, the idea is very simple, first to understand the life cycle of vUE and vUE built-in functions, the idea is to define a timer, and then to the timing of the request background, at the end of the timer, ha ha, is not all nonsense, but it is true, you can try first.

This little feature realizes itself

At the beginning, I felt it was simple, just like a heartbeat. Define a timer function in Methods to return a setInterval and a getData function, call getData in timer, and then call it in Created, and there would be a problem. Is just in the page there will be no data, why must everybody would know, this is called the only time a timer to request the background, this is not very good solution, in the calling in the created a getData is not good, well, I will do so, although I feel is not very reasonable, ohoo, good tired, The first time to write do not know how to write, or use code to express, so more clear……..

In the first version, this is very unreasonable, because it will load the page and send data twice, and there is a big problem, is that setInterval will not turn off when the web page is uninstalled, and when you enter the page again, the timer will accelerate, this BUG should be caused by the vUE switch page will not refresh, please tell me.

<script> export default {created() {this.timer() this.getData()} methods: {// This is a getData() {..... Timer () {return setInterval(()=>{this.getData()},5000)}}, destroyed() { clearInterval(this.timer) } } </script>Copy the code

In the second version, I changed the setInterval to setTimeout, because setTimeout is only executed once, so it depends on the function to drive it. Then I used updated, but it also has a disadvantage, that is, it will be triggered when there is a certain data update, so sometimes it will be executed multiple times.

<script> export default {created() {this.getdata ()} methods: {// getData() {..... Timer () {return setTimeout(()=>{this.getData()},5000)}}, updated() { this.timer() } destroyed() { clearTimeout(this.timer) } } </script>Copy the code

The final version

Listening for the list to fire the timer whenever it changes resolves the updated multiple firing.

<script> export default {data() {return {list: []}} created() {this.getData()} methods: {// This is the function getData() {..... Timer () {return setTimeout(()=>{this.getData()},5000)}}, watch: { list() { this.timer() } } destroyed() { clearTimeout(this.timer) } } </script>Copy the code

conclusion

The main thing is to understand vue’s hook functions. May be a lot of loopholes, I hope big brother more advice, there is the first time to write, a little word poor, please excuse me.

Rose-tinted spectacles