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

Vue3 project in the use of keepAlive is what, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Keepalive is a built-in component of Vue, which caches components in memory to prevent repeated rendering of DOM, which belongs to memory consumption and acquisition speed. I hope it will be helpful to you all.

The common usage is to cache components or routes, and the existing usage of vue2.x is somewhat different from vue3.x. The following is mainly about the use of keepaliev in vue3.0.

Usually, we can configure the entire page cache or only let a specific component keep the cache information, configure the routing or components of keepalive, only execute created- > mounted life cycle when the page is initialized, and enter the page for the second time and later will not perform the change life cycle, but will read the cache information.

1. Router configure cache

1) step 1: configure App.vue

The App.vue configuration of vue2.x is different from that of vue3.0. The configuration information of App.vue is as follows:

In vue2.x, router-view can be put into keepalive as follows:

The App.vue configuration method for vue3.0 is as follows:

Here component is a special component in vue, is is used to bind the specified component, and here is the page binding corresponding to the route.

2) step 2: add meta attribute

Add the meta attribute on the corresponding route to set whether the page should use caching, as follows:

{path: "/ keepAliveTest", name: "keepAliveTest", meta: {keepAlive: true / / whether the page needs to use cache}, component: () = > import ("@ / views/keepAliveTest/index.vue")}

Simple caching of the page can be achieved at this point, but some scenarios require complex processing. For example, some information on the page does not need to be read cached and needs to be processed every time it is entered. At this time, we can use the activated lifecycle to solve the problem of partial page refresh.

3) realize partial refresh of the page

First understand the life cycle of vue, the components and pages wrapped by keepAlive. The life cycle executed when the page enters is: created- > mounted- > activated.

Among them, created- > mounted is executed only when the page is entered for the first time, and the activated life cycle is executed every time the page enters, which belongs to a life cycle of keepAlive, so we can put the operations to be carried out each time the page enters into the life cycle.

The code is as follows:

Activated () {/ / each time you enter the page, set the mobile phone dynamic authentication code to empty this.$refs.mobPwdCode.inputValue =';}

The function is to set the dynamic CAPTCHA to null each time the user enters, and this function can also be achieved in other ways, such as slowing the component out of storage (see 2, component configuration cache).

4) dynamically set the routing keepAlive attribute

Sometimes when we run out of keepalive cache, we want to stop the page from keeping the cache, or set the next page keepalive. At this time, we can change the keepAve value of meta to remove the page cache. Use beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave as follows:

/ / to is the route to be redirected. From sets the meta to.meta.keepAlive of the next route for the previous page beforeRouteLeave (to, from,+ next) {/ / set meta to.meta.keepAlive = false; next ();} 2, component configuration cache 1) usage scenario

Usually we cache a page of vue, but sometimes we only need to cache a component of the page, or we need to cache the component when using the dynamic component compnent to switch components.

2) caching page specified components

When used in App.vue, all routing pages are the corresponding components of the project, using the following methods:

Use the include or exclude attribute on the keep-alive component as follows: use include

Represents the component that will cache the name as testKA

/ / APP.vue file to cache the page as a component

In the page corresponding to router, you need to set the name attribute, as follows:

The life cycle of the include attribute matching component name data () {return {}}, activated () {/ / keepalive cached page in export default {keepalive},}

In addition, include is also used as follows:

Exclude is used in the same way as include, representing components that are not cached. In addition, keep-alive has a max attribute that represents the maximum number of cache components, and once this number is reached, the longest unaccessed instances in the cached component will be destroyed before a new instance is created.

When used for a page to switch components, the use is the same as cache routing, except that the page is downgraded to a component, and the parent component is downgraded from App.vue to the corresponding routing page.

3) Summary

In actual combat, when keepalive cache components are found, they cannot be used across levels; for example, when you use the include attribute in App.vue for name= "a" matching, you can only match sub-components with a cache name (routing pages), but not cache grandchild components with name "a" (components referenced by child pages).

If you want to cache grandchild components, you can cache the entire subcomponent, or use keepalive in the subcomponent.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.