Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use keep-alive in Vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use keep-alive in Vue".

Usage

Keep-alive is a built-in component of Vue, and when it wraps dynamic components, it caches inactive component instances rather than destroying them. Like transition, keep-alive is an abstract component: it does not render itself as a DOM element, nor does it appear in the parent component chain. When a component is switched internally, its two lifecycle hook functions, activated and deactivated, will be executed accordingly.

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

Action

Keep the state in the cache during the component switching process, prevent repeated rendering of DOM, reduce loading time and performance consumption, and optimize user experience. (mainly used to preserve the state of components or to avoid re-rendering)

Props

Include-A string or regular expression. Only components with matching names are cached.

Exclude-A string or regular expression. Any component with a matching name is not cached.

Max-number. The maximum number of component instances that can be cached.

Life cycle hook

Activated

Called when the keep-alive component is activated (this hook function is not called during server-side rendering).

Deactivated

Called when the keep-alive component is inactivated (the hook is not called during server-side rendering).

The components included in keep-alive will have two more hooks in their lifecycles: activated and deactivated. Using keep-alive will keep the data in the cache. If you want to obtain the latest data each time you enter the page, you need to obtain the data in the activated stage (because the wrapped component will execute hooks such as created and mounted only when it is rendered for the first time), and undertake the task of obtaining data from hooks such as created, mounted, etc.

Note: these two lifecycle functions are called only when the component is wrapped in keep-alive, and will not be called if used as a normal component, and after version 2.1.0, even if it is wrapped in keep-alive after exclude exclusion, these two hook functions will not be called! In addition, this hook function will not be called when rendering on the server side.

Example

Cache (all) routing components

App.vue (not using keep-alive)

Home

| |

About

Export default {

Name: "App"

}

Routing component 1:Home.vue

This is a Home page

Export default {

Name: "Home"

Data () {

Return {

InputText: ""

}

}

}

Routing component 2:About.vue

This is an About page

Export default {

Name: "About"

Data () {

Return {

Value: ""

Options: [

{

Value: "zhangsan"

Label: Zhang San

}

{

Value: "lisi"

Label: "Li Si"

}

]

}

}

}

Enter the content in the input box of the Home page without using keep-alive

Thank you for your reading, the above is the content of "how to use Vue keep-alive", after the study of this article, I believe you have a deeper understanding of how to use Vue keep-alive, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.