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

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

Jan 04, 2018 am 10:51 AM
keep-alive 数据 缓存

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>
Copier après la connexion

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>
Copier après la connexion

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}
  }
})
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Utilisez ddrescue pour récupérer des données sous Linux Utilisez ddrescue pour récupérer des données sous Linux Mar 20, 2024 pm 01:37 PM

Utilisez ddrescue pour récupérer des données sous Linux

Open source! Au-delà de ZoeDepth ! DepthFM : estimation rapide et précise de la profondeur monoculaire ! Open source! Au-delà de ZoeDepth ! DepthFM : estimation rapide et précise de la profondeur monoculaire ! Apr 03, 2024 pm 12:04 PM

Open source! Au-delà de ZoeDepth ! DepthFM : estimation rapide et précise de la profondeur monoculaire !

La vitalité de la super intelligence s'éveille ! Mais avec l'arrivée de l'IA qui se met à jour automatiquement, les mères n'ont plus à se soucier des goulots d'étranglement des données. La vitalité de la super intelligence s'éveille ! Mais avec l'arrivée de l'IA qui se met à jour automatiquement, les mères n'ont plus à se soucier des goulots d'étranglement des données. Apr 29, 2024 pm 06:55 PM

La vitalité de la super intelligence s'éveille ! Mais avec l'arrivée de l'IA qui se met à jour automatiquement, les mères n'ont plus à se soucier des goulots d'étranglement des données.

Google est ravi : les performances de JAX surpassent Pytorch et TensorFlow ! Cela pourrait devenir le choix le plus rapide pour la formation à l'inférence GPU Google est ravi : les performances de JAX surpassent Pytorch et TensorFlow ! Cela pourrait devenir le choix le plus rapide pour la formation à l'inférence GPU Apr 01, 2024 pm 07:46 PM

Google est ravi : les performances de JAX surpassent Pytorch et TensorFlow ! Cela pourrait devenir le choix le plus rapide pour la formation à l'inférence GPU

Vitesse Internet lente des données cellulaires sur iPhone : correctifs Vitesse Internet lente des données cellulaires sur iPhone : correctifs May 03, 2024 pm 09:01 PM

Vitesse Internet lente des données cellulaires sur iPhone : correctifs

L'US Air Force présente son premier avion de combat IA de grande envergure ! Le ministre a personnellement effectué l'essai routier sans intervenir pendant tout le processus, et 100 000 lignes de code ont été testées 21 fois. L'US Air Force présente son premier avion de combat IA de grande envergure ! Le ministre a personnellement effectué l'essai routier sans intervenir pendant tout le processus, et 100 000 lignes de code ont été testées 21 fois. May 07, 2024 pm 05:00 PM

L'US Air Force présente son premier avion de combat IA de grande envergure ! Le ministre a personnellement effectué l'essai routier sans intervenir pendant tout le processus, et 100 000 lignes de code ont été testées 21 fois.

Le document multimodal Alibaba 7B comprenant le grand modèle remporte le nouveau SOTA Le document multimodal Alibaba 7B comprenant le grand modèle remporte le nouveau SOTA Apr 02, 2024 am 11:31 AM

Le document multimodal Alibaba 7B comprenant le grand modèle remporte le nouveau SOTA

Les robots Tesla travaillent dans les usines, Musk : Le degré de liberté des mains atteindra 22 cette année ! Les robots Tesla travaillent dans les usines, Musk : Le degré de liberté des mains atteindra 22 cette année ! May 06, 2024 pm 04:13 PM

Les robots Tesla travaillent dans les usines, Musk : Le degré de liberté des mains atteindra 22 cette année !

See all articles