current position:Home>Vue entry page for the first time, how to distinguish between created and activated?

Vue entry page for the first time, how to distinguish between created and activated?

2022-08-06 17:39:06segmentfault

Because of the component caching function used, both created and activated will be triggered when the page is first entered. I have requested list data in both hook functions, so when I first enter the page, the interface of the list data will be called twice


 Now there are two problems1. If I remove the call to request list data in created, when the browser clicks to refresh, activated will not be called, and the list will show no data.2. If the list interface call in activated is removed, the list will not be refreshed when other pages return

Is there a good way to handle this kind of request perfectly
(I have written a variable that adds +1 every time I enter a page, judged by the variable value, but there are a lot of pages, this method is a bitStupid, is there a good way for the boss!)

Other Answer 1:

You can make a isRequesting variable as the request status. If it is already being called, it will be returned directly after multiple calls.

async fetchData(page = 1) {if (this.isRequesting) return;this.isRequesting = true;// ...request codethis.isRequesting = false;}

But the core question is: when your browser clicks to refresh, why is activated not called?
Maybe this page is one of your subcomponents, and there is no keep-alive outside?It's not enough to just put one router on the top layer.

Other Answers 2:

created and activated will only trigger one.If both are triggered, it can only be said that your page has been cached long ago.
Check if the keep-alive cache specifies a name, if it is not specified, then if other pages use this component you cache, it will cause cache confusion.

Other Answers 3:

fetchData is wrapped with anti-shake function

copyright notice
author[segmentfault],Please bring the original link to reprint, thank you.

Random recommended