Detailed explanation of the use of keep-alive cache function in vue

This time I will bring you a detailed explanation of the use of the keep-alivecache function in vue. What are the precautions for using the keep-alive cache function in vue. The following is a practical case. Let’s take a look.

When we are developing a vue project, it is inevitable that the component data will be reloaded after routing switches to other components and then returns. To deal with this situation, we need to use keep-alive caches vue component information so that it will not be reloaded.

1. In app.vue

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

But in this case, all components will be cached, and single component caching cannot be achieved. Effect.

Then we add the grouping files. The implementation method is as follows:

In app.vue

<!--这里是需要keepalive的-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>
<!-- 这里不会被keepAlive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

2. In the routing index.js page

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // 这个是需要keepalive的
}，
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // 这是不会被keepalive的
}

This implements the caching function of some components

If the cached component wants to clear the data or execute the initialization method, in When loading the component, call the activated hook function , as follows:

activated: function () {
  this.data = ‘'
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How does JS store original values ​​and reference values

Detailed explanation of the use of common JS functions

The above is the detailed content of Detailed explanation of the use of keep-alive cache function in vue. For more information, please follow other related articles on the PHP Chinese website!