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

Editor to share with you what is the use of keep-alive in Vue, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

What is keep-alive?

In normal development, some components do not need to be initialized many times. At this time, we need to persist the component so that the state of the component remains the same, and the component will not be reinitialized in the next presentation.

In other words, keepalive is a built-in component of Vue that keeps the included components in state or avoids re-rendering. It's called component caching.

Is a built-in component of Vue that keeps the state in memory during component switching to prevent repeated rendering of DOM.

When you wrap a dynamic component, inactive component instances are cached rather than destroyed. Similarly, it is an abstract component: it does not render an DOM element by itself, nor does it appear in the parent component chain.

Prop:

Include: string or regular expression. Only matching components are cached.

Exclude: string or regular expression. Any matching components are not cached.

Declaration cycle execution of keep-alive

The first time the page is entered, the trigger order of the hook

Created- > mounted- > activated, deactivated is triggered when exiting

When entering (forward or backward) again, only activated is triggered

The method of event mount, etc., is only executed once and is placed in mounted; the method that the component executes each time is placed in activated

Basic usage

Components contained in keepalive will not be initialized again, which means that lifecycle functions will not be returned

But sometimes we want our cached components to be able to render again, and Vue solves this problem for us.

Components created in keep-alive will have two more life cycle hooks: activated and deactivated:

Activated triggers when the components contained in keepalive are rendered again

Deactivated triggers when components contained in keepalive are destroyed

Keepalive is an abstract component. Cached components will not be mounted. Activated and deactivated hook functions are provided for this purpose.

Parameter understanding

Keepalive can receive three attributes as parameters to match the corresponding components for caching:

Include contains components (can be strings, arrays, and regular expressions, and only matching components will be cached)

Components excluded by exclude (because strings, arrays, and regular expressions, any matching components will not be cached)

The maximum value of the max cache component (type is character or number, you can control the number of cache components)

Note: be sure to use v-bind when using regular expressions or arrays

Meet the use of vue-router combined with router to cache some pages

View components under all paths are cached

What if you just want some component in the router-view to be cached?

Use include/exclude

Use the meta property

1. Use include (exclude example is similar)

Disadvantages: you need to know the name of the component, which is not a good choice when the project is complex.

2. Use the meta attribute

Advantage: there is no need to instantiate the component name that needs to be cached

Use the keepAlive attribute of $route.meta:

You need to set the meta-information meta of router in router:

/ /. Router.jsexport default new Router ({routes: [{path:'/', name: 'Hello', component: Hello, meta: {keepAlive: false / / No cache}}, {path:' / page1', name: 'Page1', component: Page1, meta: {keepAlive: true / / need to be cached}}]})

[add salt] use router.meta to expand

Suppose there are three routes: a, B, and C.

Demand:

An is displayed by default

B jumps to An and A does not refresh.

C jumps to A _ Magi A to refresh

Mode of realization

Set the meta attribute in the A route:

{path:'/', name: 'cache, component: a, meta: {keepAlive: true / / needs to be cached}}

Set beforeRouteLeave in component B:

Export default {data () {return {};}, methods: {}, beforeRouteLeave (to, from, next) {/ / set the meta to.meta.keepAlive of the next route = true; / / Let A cache, that is, do not refresh next ();}}

Set beforeRouteLeave in the C component:

Export default {data () {return {};}, methods: {}, beforeRouteLeave (to, from, next) {/ / set the next route meta to.meta.keepAlive = false; / / so that An is not cached, that is, refresh next ();}}

In this way, B goes back to An and A does not refresh, while C returns to A does not refresh.

Pit prevention guide

1.keep-alive first matches the name field of the included component, and if name is not available, matches the registered name in the current component components configuration.

2.keep-alive will not work properly in functional components because they do not have cache instances.

3. When the matching condition exists in both include and exclude, exclude has the highest priority (current vue 2.4.2 version). For example, if it is included in the exclusion and matches to component A, that component A will not be cached.

4. Included in keep-alive, but compliant with exclude, activated and deactivated are not called.

Achieve forward refresh, backward do not refresh

Thanks to iceuncle for sharing "vue implementation forward refresh, backward do not refresh".

Summary

Routing method is good, do not need to care about which page jumped over, as long as router.go (- 1) can go back, do not need additional parameters.

In non-single-page applications, keep-alive cannot cache effectively = =

Keep-alive lifecycle hook functions: activated, deactivated

Use will keep the data in memory. If you want to get the latest data every time you enter the page, you need to obtain the data in the activated phase and undertake the task of getting the data from the original created hook.

Appendix

Lifecycle functions: functions that vue automatically executes in a certain period of time

BeforeCreate () {} data and methods were not initialized during execution

Created () {} data and methods have been initialized. If you want to call the methods method or manipulate the data in data, you can only operate in created at the earliest.

BeforeMount () {} indicates that the template has been edited in memory, but has not yet been rendered to the template page. That is, the elements in the page are not really replaced, just some template strings written before.

Mounted () {} means that the template in memory has actually been mounted to the page, and the user can see the rendered interface.

Note that this is the last function of a lifecycle function. After executing this function, the entire vue instance has been initialized, and the component has left the creation phase and entered the run phase.

Here are the hooks for the two lifecycle functions at run time:

BeforeUpdate () {} means that our interface has not been updated but the data in data is up-to-date. That is, the page has not been synchronized with the data in the latest data.

Update () {} means that the data in the page and data have been synchronized and are up to date.

BeforeDestory () {} when the lifecycle hook is executed, the instance of vue goes from the run phase to the destroy phase when the data and methods on the instance are available.

Destoryed () {} indicates that the component has been completely destroyed. All instance methods in the component cannot be used.

The above is all the content of this article "what is the use of keep-alive in Vue?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to 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.