Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "is there a caching mechanism in vue", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "whether there is a caching mechanism in vue" article.

There is a caching mechanism in vue, you can use "keep-alive" to keep the switched components in memory, retain the state of the component or avoid re-rendering, and achieve page caching; "keep-alive" is a vue built-in abstract component for caching components to avoid loading the same components multiple times and reduce performance consumption.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

Is there a caching mechanism in vue?

Cache, whether on the PC side or on the mobile side, is an inevitable problem. There is a keepAlive in vue, and this api basically meets some of the needs of our development.

A brief introduction to keep-alive:

1. Keep the switched component in memory, keep its state or avoid re-rendering, and realize page caching.

2. It is an abstract component that does not render DOM elements and does not appear in the parent component chain.

3. When the component is switched inside, its two lifecycle hook functions, actived and deactived, will be executed accordingly. (this is basically nothing.)

Note: in version 2.2.0 and later, activated and deactivated will be triggered in all nested components within the tree.

Keep-alive is a built-in component of Vue, and when it wraps a dynamic component, it caches inactive component instances rather than destroying them.

Function:

Used to cache components, avoid loading the same components multiple times, reduce performance consumption, and improve user experience.

Examples of how to use it:

Use keep-alive tags in App.vue to cache all pages

Partial page cache

Note: if transition is directly wrapped around these two, an error will be reported; if you use transition-group directly, you will also report an error, which requires two transition.

The above is about the content of this article on "is there a caching mechanism in vue"? I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.