Purpose: implement component cache

Keep-alive is a component built into Vue that can preserve the state of contained components or avoid re-rendering. After vue version 2.1.0, keep-alive added two new attributes: include(cache of included components) and exclude(exclude components are not cached and have a higher priority than include).

Hook functions:

'activated' is called after the component is rendered. 'deactivated' is called after the component is destroyedCopy the code
<keep-alive include='include_components' exclude='exclude_components'> <component> *<! -- Whether the component is cached depends on include and exclude attributes -->* </component> </keep-alive>Copy the code

Parameter Description Include-string or regular expression. Only components with matching names will be cached. Exclude-string or regular expression components with matching names will not be cached. Both can use commas to separate strings, regular expressions, and arrays. Remember to use V-bind when using re’s or arrays

* <! -- Comma-separated strings, only components A and B are cached. -->* <keep-alive include="a,b"> <component></component> </keep-alive> *<! - regular expressions (need to use the v - bind, in line with the matching rules will be cached) - > * < keep alive: - include = "/ a | b/" > < component > < / component > < / keep alive - > * <! -->* <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>Copy the code

Principle: Vue. Js internally abstracts DOM nodes into vNodes. The cache of keep-Alive components is also based on Vnodes rather than directly storing DOM structures. The pruneCache and pruneCache components are cached in the cache object, and vNodes are removed from the cache and rendered when needed.