vue3 had no choice but to check the source code of keepalive and solved the problem online

1. Keepalive function


1. Keepalive function

keepalive is a global component in vue3
keepalive itself will not be rendered, nor will it appear in the dom node, but it will be rendered as a vnode, and the cache and keys in keepalive can be tracked through vnode, of course, only in the development environment, and it is not exposed after the build is packaged. In vnode (this needs to be confirmed again)
The most important function of keepalive is to cache components
keepalive uses the LRU cache elimination strategy to update the component cache, which can make more efficient use of memory and prevent memory overflow. The maximum number of caches in the source code max is 10, that is, after 10 components, the first cached component will be eliminated.

2. Use scenarios of keepalive

Let's assume a scenario here: A page is the home page =====> B page list page (pages that need to be cached) =======> C details page
When going from the C details page to the B page, it is necessary to return to the B cache page, including the basic data of the page and the scroll bar position information of the list
If the page B returns to page A, the cache page of B needs to be emptied
Another scenario above: enter the page to cache directly, and then it is over. This is relatively simple and will not be discussed in this article.
3. The use process in the project
The keepalive component has a total of three parameters

include: Strings, regular expressions, arrays can be passed, and components whose names match successfully will be cached
exclude: You can pass strings, regular expressions, arrays, and components whose names match successfully will not be cached
max: a number that can be passed, limiting the maximum number of cache components, the default is 10



First, add and introduce keepalive components in the root code of App.vue. From here, you can find that what I cache here is equivalent to the entire page. Of course, you can also control a certain area component in the page in a finer-grained manner.

Through App.vue, it can be found that the page components to be cached are saved through pinia (that is, vuex used in vue2), to process the include cache, and to save the scroll bar information data in the page components

When the component routing is just switched, the component is written to include through beforeRouteEnter, and the component life cycle has not yet started. If the component life cycle has already started to execute, it makes sense to write again. Therefore, this hook function cannot be written in the setup, and must be written separately. Of course, you can also replace beforeEach with other hook functions of routing, but if you use it here, it seems that you can't use pinia, which needs further study.

When the component route leaves, it is judged whether to move out of the cache. This hook can be written directly in the setup.

The cache of the scroll position is processed in the two hook functions of keepalive, the position in the cache is obtained in onActivated, and the position in the cache is recorded in onDeactivated

Define a method here to set scrollTop using native javascript api

At the same time, how to get the height is to register the scroll event first, and then get the current scroll bar position through getScrollTop and save it

A useThrottleFn is used in the above registration of the scroll event. This class library is provided by @vueuse/core. It encapsulates many tools and is very good. Those who are interested can study it.

At this time, you can also check the vnode where the instance was found to find the keepalive, which is in the subcomponent next to the keepalive

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00