Problem trigger and solution

Recently, I have been writing vUE exercises. The content is relatively simple, mainly to get familiar with VUE and find relevant problems, and to check and fill up the gaps. Briefly say the content of the exercise and the generation of the question:

Vue-cli 2.0 scaffolding is used in the practice, the content is a simple imitation music playing app, and the function is relatively simple, basically is a single page router switch each album list, click to enter the album content page, click the song name can play, pause, next song functions.

After a brief background, let’s talk about the situation in which the problem arises: When clicking to jump from the entire song list page to a single album list page, and then clicking the back button to return to the song list page, the page saves the previous browsing position, but the interface requests the data again. Because the song list page has the scrolling loading effect, the data acquisition method of array concat is used in VUEX. The data returned from the request is reloaded in the list, and the v-for loop has duplicate keys, causing the console to report an error. This may sound confusing, but here are some basic code parts:

Get list data in VUex: GET_COLLECTION_LIST (state, val) {state. CollectionList = state. CollectionList. Concat (val)} song list created to get the data, Destroyed destroyed check:created(){  this.collectionListMethod({limit: this.limit, offset: this.offset})},
mounted(){  window.addEventListener('scroll', this.isScrollBot)}
destroyed(){  window.removeEventListener('scroll', this.isscrollbot)} The album list page returns using this.$router.go(-1)Copy the code

If there is a problem, it is necessary to solve the problem. Through the query, we learned that keep-alive can cache the data and use the cache when switching routes without triggering the interface request again. It seems that the problem can be solved perfectly.

First add meta:{keepAlive:true} provide an identifier for whether the following router-view needs to be cached {path:'/songLis',  component: SongLis,  meta: { keepAlive: true<keep-alive> <router-view V-if = <keep-alive> <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if=! ""$route.meta.keepAlive"/>Copy the code

Add finished, back to the page to see the effect! The console does not display an error indicating that keep-alive is in effect, but the situation is not so simple. When you click the mouse, you will find that the scrollloaded listening event is not cancelled. The component destroyed the listening event. And then cut back to the album list page, the scroll load is not performed, indicating a face meng ~

After checking the VUE document, I found the following sentence in the document:


when wrapping dynamic components, inactive component instances are cached rather than destroyed.

A component that uses keep-alive does not trigger the destroyed hook method, which is why unlistening fails. The created and destroyed hooks of vue will be triggered during the keep-alive switch. Therefore, you need to modify the code to cancel the listening during deactivated. Restore listening on activated, otherwise scrolling listening will not work when switching back:

// The keep-alive hook function is triggered when the component recoversactivated(){  window.addEventListener('scroll', this.isscrollbot)}, // The keep-alive hook function is triggered when the component becomes unavailabledeactivated(){  window.removeEventListener('scroll', this.isScrollBot)}Copy the code

The result is exactly as expected, the switch route page remains in place, the interface is not repeatedly requested, and scrolling loads are not triggered outside the album list component.

2. Keep-alive

Now that keep-alive has been used, the relevant usage is briefly summarized through the documentation:

As mentioned above, the component wrapped by keep-Alive will cache the component instance when it is inactive and will not be destroyed. When it is active again, it will read the cached contents and save the component state without repeatedly requesting the interface for data.

(1) The most basic use

Basic usage: <keep-alive> <component :is="view"></component> </keep-alive> can also be judged by condition: <keep-alive> <comp-a v-if="a > 1"></comp-a>< comp-b v-else></comp-b> </keep-alive> This time when the switch between two components is triggered, the data and state in the component will be saved. If there is an input box, the content of the input box will be preservedCopy the code

(2) Conditional caching

Keep-alive provides include, exclude, and Max parameters. The first two parameters allow the component to cache conditionally. Both parameters can accept string, regular, and array forms. Max indicates the maximum number of components that can be cached and accepts a number type.

<keep-alive include="a,b">
  <component :is="view"></component> </keep-alive> Only two components A and B will trigger keep-alive. The name here is the name corresponding to the component name. If name does not exist, the name registered in the parent component will be searched. The re and array methods are the same as above, but v-bind:include= is required' 'Way. <keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>
Copy the code

(3) Hook function

The created and Deactivated hook functions, which are activated when the component returns to the active state and destroyed when the component loses the active state, act as created and Destroyed hooks, respectively.


The above is the personal use and understanding of keep-alive. If there is any deficiency, please correct it