Vue utilise keep-alive pour implémenter la mise en cache des données sans actualiser le partage d'instance

Cet article présente principalement l'utilisation de keep-alive dans Vue pour réaliser la mise en cache des données sans actualisation. Le code détaillé est compilé ici, et les amis intéressés peuvent s'y référer.

Jusqu'à présent, j'ai été exposé à Vue pendant une courte période et le projet a progressé dans une certaine mesure. Cependant, le projet manque de mécanisme de mise en cache, les données seront donc recréées. chaque fois que la page est sautée. Bien que la vitesse de demande de données du système soit très rapide, cela nuira cependant aux performances du système, nous devons donc ici optimiser le système et ajouter du cache.

En fait, jusqu'à présent, je ne maîtrise toujours pas Vue. Chaque fois que je creuse plus profondément, je découvre les merveilles de Vue, je ne sais pas quoi utiliser pour implémenter la mise en cache. Je le cherche depuis longtemps et il existe plusieurs façons. En d'autres termes, utilisez vuex, vuet ou keep-alive, puis comparez-le. À mon avis, vuex et vuet implémentent la gestion de l'état, et l'accent est mis sur les données. traitement ; si vous souhaitez obtenir une mise en cache globale et empêcher l'actualisation des fichiers créés, vous devez utiliser keep-alive.

Alors ici, je veux vous présenter comment utiliser keep-alive pour implémenter des pages en cache ? C'est en fait très simple, juste quelques phrases.

1. Keep-alive doit être utilisé conjointement avec router-view. Une chose à noter ici est que keep-alive lui-même est une fonction de vue2.0, pas de vue-router, donc vue1.0. la version n'est pas prise en charge. Le document officiel de keep-alive est ici. Le code est implémenté comme suit. La vue du routeur est dans l'entrée APP.vue

<template>
 <p id="app">

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

2. Cela sera. réaliser la mise en cache des composants. Mais un inconvénient est que tous les composants seront mis en cache. Cependant, en réalité, certaines de nos pages doivent encore être actualisées à temps, comme les données de la liste. Lorsque nous voulons afficher les détails, nous partageons tous une page. et actualisez simplement la page, donc ce composant partagé ne peut pas être mis en cache, sinon les autres entrées seront des données précédemment mises en cache. Alors, comment le personnaliser ? Ensuite, vous devez ajouter un jugement v-if dans la vue du routeur, puis ajouter "meta:{keepAlive:true}" à la page que vous souhaitez mettre en cache dans le fichier défini par le routeur If. vous n'en voulez pas, le cache est "meta:{keepAlive:false}" ou n'est pas écrit. Seulement lorsqu'il est vrai, il sera reconnu par keep-alive puis mis en cache.

<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. Ajoutez un méta-jugement au fichier du routeur

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}
  }
})

Vous voulez voir s'il y a is any Si le cache réussit, vous pouvez imprimer l'indicateur de sortie dans le hook créé de chaque composant. Le cache réussit lorsque vous entrez dans la page pour la première fois. Create demandera les données. Il ne demandera pas à nouveau les données. appeler directement le cache.

L'ajout du cache peut grandement améliorer le cache. Après tout, dans un système de traitement de données, les données sont trop volumineuses et il n'est pas bon de demander une page à chaque fois. time Avec le cache, le cache mis en cache peut être actualisé en temps réel sans mise en cache.

Recommandations associées :

Solution Angularjs au problème de mise en cache des données en mode de compatibilité 360

Le développement PHP WeChat utilise Cache pour résoudre la mise en cache des données

Explication détaillée de la mise en cache des données de l'applet WeChat avec images et texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!