Usage of keep-alive in vue and description of problem

-Alive's functions and benefits

In e-commerce related projects, when we first enter the list page, we need to request data. When I enter the details page from the list page, the details page do not cache and also need to request data, and then return to the list page. At this time, we use keep-alive to cache components to prevent secondary rendering, which will greatly save performance.

-Basic usage of alive

In

<!-- Cache all pages -->
<keep-alive>
 <router-view v-if="$.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$.keep_alive"></router-view>

The component content that needs to be cached is added directly in the router:

meta: {
 keepAlive: true // true means that cache is required false means that it does not need to be cached }

-alive's life cycle

When keep-alive is introduced, the page enters for the first time, the triggering order of the hook is created-> mounted-> activated, and the deactivated is triggered when exiting. When entering again (forward or backward), only activated is triggered.

Let's take a look at the usage problems and solutions of keep-alive in vue

Problem description

In business development, there will be a route jump but returns a scenario where data needs to be retained; keep-alive is provided in vue to handle it

Solution

Return to the dom and do not let it refresh again. Bread a layer outside the vue-view. When keep-alive is introduced, the page enters for the first time. The trigger order of the hook is created-> mounted-> activated, and the deactivated is triggered when exiting. When entering again (forward or backward), only activated is triggered.

The method of event mount is only executed once and placed in mounted; the method of execution of components is placed in activated;
There can be configured whether to wrap keep-alive through parameters;

<keep-alive>
  <router-view v-if="$" style="min-height:100%"></router-view>
</keep-alive>
<router-view v-if="!$" style="min-height:100%"></router-view>
//The configuration in the routing configuration that does not need to be refreshed is meta: {keepAlive: true}, and this route is displayed on the above tag;//The configuration in the routing configuration that needs to be refreshed meta: {keepAlive: false}, This route is displayed in the following tag；

Summarize

The above is the usage and problem description of keep-alive in vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!