Vue project city selection page-use Keep-alive to optimize web page performance (8-11)

Use Keep-alive to optimize web page performance

Every time we enter the city page, our json will be reloaded.
Insert picture description here
then what should we do?
What does it mean to use keep-alive? That is, after I load it once, we will put the loaded into the memory, and use it directly when we execute this function next time.
Insert picture description here

But using keep-alive, when we need to refresh, there is another way to re-request.
We add a calculated attribute and add the city to the end of the request.
Insert picture description here
When we use keep-alive, it will bring a function activated(). Even if our data enters the cache, it will re-request when we refresh. We can do this.

  1. Add data from the previous city
    Insert picture description here
  2. When the first request is made, the city is assigned to lastCity. When it is refreshed again, it is judged whether it is the previous city or not, and then the getHomeInfo request is called again.
    Insert picture description here

Guess you like

Origin blog.csdn.net/weixin_45647118/article/details/114298318