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

This article mainly explains "how to use the keep-alive of vue correctly". The content of the explanation 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 of vue correctly".

Let's first take a look at the requirements in a project.

As tough front-end developers, we have to face all kinds of requirements raised by product managers all the time, such as this scenario.

Scene:

Navigate to the list page from the click on the home page

List page Click list to enter the data details page

Return from the details page and want the list page to be cached without re-rendering the data, which will improve the user experience.

Analyze it.

In this way, if it is Mini Program, the default list page will be cached, because Mini Program runs on Wechat client. When we open a page, we will create a new webview.

All the list pages and details pages are two webview, when we enter the details page, the list page webview will only be under the details page webview and will not be destroyed.

The following is the Mini Program operating environment: we can see that each page has a webview

However, our project is developed with vue webapp, multiple components share a window, when we switch routes, the cut-out component will be destroyed, all list pages to enter the details page list page will be destroyed, return to the list page, the list page component will be reloaded.

Solution

For those who need sleeping clothes, change to a simple need.

Emm... After looking at myself in the mirror, I guess I won't be able to get any convenience from my face in my life. Honestly change my plan.

Keep-alive

Keep-alive is an abstract component provided by Vue and is mainly used to preserve the state of the component or to avoid re-rendering.

When you wrap dynamic components, inactive component instances are cached rather than destroyed.

Similarly, it is an abstract component that does not render an DOM element by itself, nor does it appear in the parent component chain.

But keep-alive caches all the components of its package.

Em... What to do? we just need to cache the list page.

Analyze it.

We can split the requirements into 2 steps

(1) distinguish between components that need to be cached and those that do not, and define what needs to be cached and which does not need to be cached in the meta-information of the routing configuration of the component and meta.

The specific code is as follows

1, define two egress router-view

2. Define what needs to be cached and what does not in the router configuration

New Router ({

Routes: [

{

Path:'/

Name: 'index'

Component: () = > import ('. / views/keep-alive/index.vue')

}

{

Path:'/ list'

Name: 'list'

Component: () = > import ('. / views/keep-alive/list.vue')

Meta: {

KeepAlive: true / / needs to be cached

}

}

{

Path:'/ detail'

Name: 'detail'

Component: () = > import ('. / views/keep-alive/detail.vue')

}

]

})

(2), start caching components on demand

Let's start with the api provided by the official documentation.

Keep-alive components if include is set, only components that match include will be cached

So the idea is to dynamically modify the include array to implement on-demand caching.

Export default {

Name: "app"

Data: () = > {

Include: []

})

Watch: {

$route (to, from) {

/ / if the page you want to to needs to be cached by keepAlive, put name push into the include array

If (to.meta.keepAlive) {

! this.include.includes (to.name) & & this.include.push (to.name)

}

}

}

}

At this point, we found that when we return to the list page from the details page, the list page is really no longer refreshed.

Em... A new problem arises again, because the list page is cached, at this time I enter a list from the home page, and then click on the home page to enter a list. That is, entering the list component from the home page should not be cached.

To solve this, we are defining the route by adding another field to the meta-information. Here is the deepth field, which represents the level of entering the route. For example, the home route deepth is 0.5, the list page is 1, and the details page is 2.

New Router ({

Routes: [

{

Path:'/

Name: 'index'

Component: () = > import ('. / views/keep-alive/index.vue')

Meta: {

Deepth: 0.5 / / defines the level of routing

}

}

{

Path:'/ list'

Name: 'list'

Component: () = > import ('. / views/keep-alive/list.vue')

Meta: {

Deepth: 1

KeepAlive: true / / needs to be cached

}

}

{

Path:'/ detail'

Name: 'detail'

Component: () = > import ('. / views/keep-alive/detail.vue')

Meta: {

Deepth: 2

}

}

]

})

Then add listeners to the app.vue to listen to the direction in which we enter the route

The specific code is as follows

Export default {

Name: "app"

Data: () = > {

Include: []

})

Watch: {

$route (to, from) {

/ / if the page you want to to needs to be cached by keepAlive, put name push into the include array

If (to.meta.keepAlive) {

! this.include.includes (to.name) & & this.include.push (to.name)

}

/ / if the page to form (leave) is cached by keepAlive

/ / then judge whether to move forward or backward according to deepth

/ / if it is a retreat

If (from.meta.keepAlive & & to.meta.deepth < from.meta.deepth) {

Var index = this.include.indexOf (from.name)

Index! =-1 & & this.include.splice (index, 1)

}

}

}

}

Thank you for your reading, the above is the content of "how to use vue keep-alive correctly". After the study of this article, I believe you have a deeper understanding of how to correctly 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.