What does vue cache component mean?-Front-end Q&A-php.cn

What does vue cache component mean?

青灯夜游

Release： 2022-12-02 20:51:35

Original

2926 people have browsed it

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.

What does vue cache component mean?

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

What does vue cache component mean?

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

What does vue cache component mean?

(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.

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component>
</keep-alive>

Copy after login

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: &#39;/&#39;, 
  component: () => import(&#39;../views/home/index.vue&#39;), 
  //是否缓存
  meta: { isKeepAlive: true } 
},

Copy after login

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>

Copy after login

(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!