What does vue cache component mean?

In Vue, the cache component is "keep-alive" and is an abstract component; it will not render a DOM element by itself, nor will it appear in the component's parent component chain. Cache components are mainly used to preserve component state or avoid re-rendering. When it wraps dynamic components, it caches inactive component instances instead of destroying them.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

In vue, the cache component is "keep-alive", which is an abstract component.

Cache component "keep-alive"

keep-alive is a built-in component of Vue. When wrapping dynamic components, it will Inactive component instances remain in memory, optimizing requests and preventing DOM re-rendering

Official documentation:Using keep-alive on dynamic components

Mainly used to retain component state or avoid re-rendering. When it wraps dynamic components, it will cache inactive component instances instead of destroying them.

(1) The component cache is not persistent. It just does not re-render while the application is running. If the page is refreshed, it will still return to the initial state.

(2) is an abstract component: it will not render a DOM element by itself, nor will it appear in the component's parent component chain.

(3) The component being switched to is required to have its own name, whether through the component's name option or local/global registration.

(4) Component life cycle hooks and caching

(5) The include and exclude attributes allow components to be cached conditionally. Both can be represented as a comma-separated string, a regular expression, or an array.

1038fc66b56645805578e2e786c33093
3a9efc80b00b302f797c801d5f73f956
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

227dbf312b29b2dfafd2902d664cd056
fad9f6a14592db518ac5e95030bbb33d
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

1d733825f9bcc4ef626ba6751304bb79
ebb2d94ca87df38137a52379b8767b08
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

The match first checks the component's own name option, and if the name option is not available, matches its local registration name (the key value of the parent component's components option). Anonymous components cannot be matched. [Learning video sharing: vue video tutorial, web front-end video]

##Some issues with using cache components

Problem 1: If there are too many cached components, or unnecessary components are also cached, it will cause excessive memory usage.

Problem 2: It will cause things that need to be updated to be cached. For example, if the detail component is cached, it will not be updated.

Strategy: Cache those important, high-frequency (such as homepage), or components that don’t change much.

Solution: Mark the route to be cached, and then dynamically decide whether to cache the route when loading the route. More precise control over the components to be cached

Optimized writing method for component caching:

When defining routes, add additional routing [meta information], to add some information elements.

{ 
  path: '/', 
  component: () => import('../views/home/index.vue'), 
  //是否缓存
  meta: { isKeepAlive: true } 
},

Determine whether to cache components based on meta meta information in app.vue

<div id="app">
  <keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"/>
  </keep-alive>
  <router-view v-if="!$route.meta.isKeepAlive"/>
</div>

(Learning video sharing:

web front-end development, Basic programming video)

The above is the detailed content of What does vue cache component mean?. For more information, please follow other related articles on the PHP Chinese website!