Vue project optimization method through keep-alive data caching

This article mainly introduces the method of Vue project optimization through keep-alive data caching. The content is quite good. I will share it with you now and give it as a reference.

7c9485ff8c3cba5ae9343ed63c2dc3f7 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.

7c9485ff8c3cba5ae9343ed63c2dc3f7 When wrapping dynamic components, inactive component instances are cached instead of destroying them. Like 300ff3b250bc578ac201dd5fb34a0004, 7c9485ff8c3cba5ae9343ed63c2dc3f7 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 that can be used for caching Components to avoid loading corresponding components multiple times and 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 partial 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>

The 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 on-demand loading of components, just like the lazy loading of images. If the customer We didn’t see those pictures at all, but they were all loaded when we opened the page. This would 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 the entire content of this article, I hope it will be helpful to your study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the use of Vue component option props

Vue.js Universal Application Framework-Nuxt.js Analysis

Introduction to how to simply configure axios with vue.js

The above is the detailed content of Vue project optimization method through keep-alive data caching. For more information, please follow other related articles on the PHP Chinese website!