Router-view is used with keep-alive components. Router-view is used with keep-alive components. Router-view is used with keep-alive components.
This article will examine the keep-alive component in detail.
The main analysis
abstract: true
Keep-alive and router-view are abstract components and do not render. The keep-alive component is also an abstract component.
props
Support for inclue/exclude values in the form of re/string/array to cache specific values
Max indicates the maximum number of components that can be cached
Created/mounted function/destroyed life cycle
Created creates a cache object and an array of keys when initialized.
Mounted: Create user watcher. When include/excluede has components that do not need to be cached, destroy them and clear the cache.
Destoryed, when the keep-alive component is destroyed, destroy all components and clear all caches.
Render function
Since it is an abstract component, you will not render the view, so how can you not render the view?
Simply return the vNode instance of the child component.
First, you get the content of the anonymous slot. For slots, see the normal slot in Vue’s slot parsing. The first child component in the anonymous slot is then retrieved.
1. The sub-component does not meet the cache conditions and returns the sub-component Vnode directly
2. If the cache conditions are met, check whether the component is in the cache. If yes, read the component directly. Otherwise, add cache.
3. If the number of cached components exceeds the user-defined Max, destroy the components.
Here, we’ve done a little bit of processing, so keys are actually a queue, first in, first out. That is, when the cache limit is exceeded, the first component of the keys array (advanced) is destroyed. Each time a cache is created/read, the created/read cache is placed at the end of the queue.
The role of the data. The keepAlive
1. Use with VueRouter
In the previous VueRouter source code analysis (3) : router-link/router-view component article, also mentioned keep-alive. If the parent has a data.keepAlive property, the parent’s cache will be read.
2. Lifecycle hook actived/deactived
The component data.hook property calls the actived/deactived callback function that the user added when the component has data.keepAlive.
Tool function
matches
Regular and array methods, nothing to say
pruneCacheEntry
This clears the keep-alive function.
The parameters are the component’s cache (this.cache), the target component’s key, the cached component’s keys(this.keys), and the currently rendered component’s vnode.
Note that in all cases except Max, the cache is cleared with only three parameters.
The fourth argument is passed when cleaning up a component that exceeds the maximum cache. This avoids calling the component Destroy hook because the first component in the queue has the same tag as the currently rendered component. But the cache is still deleted.
pruneCache
Here is the callback function for custom Watcher. Components that do not match inclue or exclude conditions are cleared from the cache.
The last
In fact, there is nothing difficult about the keep-alive component and the two routes (after all, the hard parts, such as slots, have been analyzed). It’s one of the easiest parts.