Vue uses keep-alive to implement data caching without refreshing instance sharing

This article mainly introduces the use of keep-alive in vue to achieve data caching without refreshing. The detailed code is compiled here, which has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Up to now, I have been exposed to Vue for a short period of time, and the project has progressed to a certain extent. However, the project lacks a caching mechanism, so the data will be re-created every time the page is jumped. Although the system's data request speed is very fast, However, doing this will have great harm to the performance of the system, so here we need to optimize the system and add cache.

In fact, until now, I still haven’t mastered Vue. Every time I dig deeper, I will discover the wonderfulness of Vue. I don’t know what to use to implement caching. I have been looking for it for a long time and there are several ways. In other words, use vuex, vuet or keep-alive, and then compare it. In my opinion, vuex and vuet implement state management, and the focus is on data processing; if you want to achieve overall caching and prevent the refresh of created, you must Use keep-alive.

So here I want to introduce to you how to use keep-alive to implement cached pages? It's actually very simple, just a few sentences.

1. Keep-alive must be used in conjunction with router-view. One thing to note here is that keep-alive itself is a function of vue2.0, not vue-router, so the vue1.0 version does not Supported. The official document of keep-alive is here. The code is implemented as follows. The router-view is in the entrance APP.vue

<template>
 <p id="app">

  <keep-alive>
   <router-view></router-view>
  </keep-alive>
  
  <!--这里是其他的代码-->
 </p>
</template>

2. This will realize the caching of components, but there are One disadvantage is that all components will be cached, but in reality some of our pages still need to be refreshed in time, such as list data. When we want to view details, we all share a component and just refresh the page, so this shared component cannot Cached, otherwise it will cause other entries to be previously cached data. So how to customize it? Then you need to add a v-if judgment in the router-view, and then add "meta:{keepAlive:true}" to the page you want to cache in the file defined by the router. If you don't want it, The cache is "meta:{keepAlive:false}" or not written. Only when it is true, it will be recognized by keep-alive and then cached.

<template>
 <p id="app">
  <!--缓存想要缓存的页面，实现后退不刷新-->
  <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  
  <!--这里是其他的代码-->
 </p>
</template>

3. Add meta judgment to the router file

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  {//home会被缓存
    path:"/home",
    component:home,
    meta:{keepAlive: true}
  }
  {//hello不会被缓存
    path:"/hello",
    component:hello,
    meta:{keepAlive: false}
  }
})

If you want to see if the cache is successful, you can Print the output flag in the create hook of each component. If the cache is successful, it means entering the page for the first time. Create will request the data. It will not request again but directly call the cache.

Adding cache can greatly reduce the impact on system performance. After all, in a data processing system, the data is too large and it is not good to request the page every time. With cache, the cache can be refreshed in real time without caching.

Related recommendations:

Angularjs’ solution to data caching problem in 360 compatibility mode

PHP WeChat development uses Cache to solve data caching

Detailed graphic explanation of WeChat applet data cache

The above is the detailed content of Vue uses keep-alive to implement data caching without refreshing instance sharing. For more information, please follow other related articles on the PHP Chinese website!