How to optimize through keep-alive in vue

This article mainly introduces the method of Vue project optimization through keep-alive data caching. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look.

is a built-in component of Vue, which can retain the state in the memory during component switching to prevent repeated rendering of the DOM.

When wrapping dynamic components, inactive component instances are cached instead of destroying them. Like , is an abstract component: it does not render a DOM element by itself, nor does it appear in the parent component chain.

prop:

1. #include: String or regular expression. Only matching components will be cached.

2. exclude: string or regular expression. Any matching components will not be cached.

Reduce the number of requests to the server through the keep-alive provided by vue                    

VUE2.0 provides a keep-alive method, which can be used to cache components and avoid Load the corresponding components multiple times to reduce performance consumption. For example, the data of a page, including pictures, text, etc., have been loaded by the user, and then the user jumps to another interface by clicking on it. Then return to the original interface from another interface. If it is not set, the information of the original interface will be requested from the server again. The keep-alive provided by vue can save the requested data of the page, reduce the number of requests, and improve the user experience.

Caching components are divided into two types, components that cache the entire site's pages or components that cache part of the pages.

1. Cache all pages, suitable for situations where each page has a request. The method is as follows: wrap the router-view that needs to be cached with the keep-alive tag.

<keep-alive>
<router-view></router-view>
</keep-alive>

Cache can be realized by writing the first trigger request into the created hook. For example, when you go from the list page to the details page, you will still be on the original page when you come back.

2. Caching some components or pages can be achieved by using the router.meta attribute through judgment. The method is as follows:                                                                                                                                                                                   

<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="! $route.meta.keepAlive">
</router-view>

router settings are as follows:

 routers:[
      {  path: '/home',
        name: home,
        meta:{keepAlive: true}   // 设置为true表示需要缓存，不设置或者false表示不需要缓存                    }
     ]

It can also be set through the new attribute include/exclude. The name implies the meaning, include means to include, exclude means to exclude. Here you need to use the name of the component to set it, so the name must be added. Adding components a and b requires caching, while components c and d do not require caching. It is written as follows:

<keep-alive include="a,b">
<component></component>
</keep-alive>   
<keep-alive exclude="c,d">
<component></component>
</keep-alive>

The optimization of the vue project can also be achieved through the on-demand loading of components, just like the lazy loading of pictures. If the customer does not see those pictures at all, but we are opening the page When all is loaded, this will greatly increase the request time and reduce the user experience. Lazy loading is used on many websites, such as shopping websites such as Taobao and JD.com. There are many picture links on them. If you pull the scroll down quickly, you may see the pictures loading. Condition. For specific instructions on how to use it, you can read another article: On-demand loading of pages for vue project optimization (vue webpack)

The above is what I compiled for you. I hope it will be helpful to you in the future.

Related articles:

How to use JQUERY to implement multiple AJAX requests

How to use the form-data format to transfer files in NodeJs

How to implement lazy loading of images in WeChat applet

How to achieve focus image effect using js

The above is the detailed content of How to optimize through keep-alive in vue. For more information, please follow other related articles on the PHP Chinese website!