Hello, this is a more literal challenge. This is the 6th day of my participation in the August More Text Challenge

1. Keep alive – characteristics

  1. First, it has vUE built-in, abstract components

  2. Second, when a dynamic component is wrapped with the keep-alive tag, inactive component instances are cached rather than destroyed

  3. It does not render a DOM element itself, nor does it appear in the parent component chain of the component.

Note: Vue virtual DOM, through the diff algorithm, generate real DOM tree principle, in fact, is borrowed from snabbDOM, interested students can go to Github to read the source code: SNabbDOM source code

  1. The activated and deactivated lifecycle hook functions will be executed accordingly.

2. Props of the keep-alive component

  1. Include (a regular expression) : Defines a cache whitelist. Keep-alive caches hit components

  2. Exclude (a regular expression) : Defines a cache blacklist. Matching components will not be cached

  3. Max: Defines the upper limit of the cache component, beyond which the cache data is replaced with LRU’s policy

LRU: the Least Recently Used algorithm is often Used in cache-related designs

An LRU life scenario: You have a storage box that can only hold 10 pairs of socks, but you recently bought a new pair and want to put them in, what do you do? Throw out the pair you wear least often.

This storage box is equivalent to the cache capacity of only 10kb, when you want to store 11kb of items, you have to remove the least useful items from the cache

3. The source code

Source address: github.com/vuejs

I won’t paste the source code related to Keep-Alive here. If you are interested, read it for yourself.

Here is a summary of how keep-alive implements caching

  • Step 1: Get the first child object wrapped around Keep-Alive and its component name (find the corresponding code in the source code)

  • The second step: according to the set blacklist and whitelist (if any) condition matching, decide whether to cache. If not, return the component instance (VNode), otherwise perform step 3. (There is a corresponding embodiment in the source code)

  • Step 3: Generate a cache Key based on the component ID and tag, and look in the cache object to see if the component instance has been cached. If so, simply fetch the cached value and update the key’s position in this.keys (updating the key’s position is the key to implement the LRU substitution strategy), otherwise perform step 4. (There is a corresponding embodiment in the source code)

  • Step 4: Store the component instance in this.cache and save the key value. Then check whether the number of cached instances exceeds the Max value. (There is a corresponding embodiment in the source code)

  • Step 5: Last but not least, set the keepAlive property value of the component instance to true. (There is a corresponding embodiment in the source code)

Each step above in the source code has a corresponding embodiment, be sure to go to see the source code oh, refueling duck together