Explication détaillée de la façon d'utiliser keepAlive dans le projet vue3

Cet article vous apporte une explication détaillée de la façon d'utiliser keepalive dans le projet Vue. Keepalive est un composant intégré de Vue. Sa fonction est de mettre en cache les composants en mémoire pour éviter le rendu répété du DOM, qui consomme de la vitesse d'acquisition de mémoire. J'espère que cela aide tout le monde.

L'utilisation courante est de mettre en cache des composants ou des routes. Il existe quelques différences entre l'utilisation existante de vue2.x et vue3.x. Ce qui suit décrit principalement l'utilisation de keepaliev dans vue3.0.

Habituellement, nous pouvons configurer l'intégralité du cache de la page ou autoriser uniquement un composant spécifique à conserver les informations du cache. Si la route ou le composant keepalive est configuré, le cycle de vie créé-> monté ne sera exécuté que lorsque la page est initialisée, la deuxième fois. et plus tard Lorsque vous entrez à nouveau dans la page, le cycle de vie ne sera pas exécuté, mais les informations du cache seront lues.

1. Cache de configuration du routeur

1)Étape 1 : Configurer App.vue
Il existe des différences dans la configuration d'App.vue entre vue2.x et vue3.0. Les informations de configuration d'App.vue sont les suivantes. :
vue2. Dans , voici la page de liaison correspondant au parcours.

2)

Deuxième étape : Ajouter un attribut méta

Ajoutez un attribut méta sur l'itinéraire correspondant pour définir si la page doit utiliser la mise en cache, comme suit :

<template>
	<!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/></template>

À ce stade, une simple mise en cache de la page peut être réalisée, mais certains des scénarios doivent être effectués Un traitement complexe, par exemple, une partie des informations de la page n'a pas besoin d'être lue à partir du cache et doit être traitée à chaque fois qu'elle est saisie. À ce stade, nous pouvons utiliser le cycle de vie activé pour résoudre le problème. problème de rafraîchissement partiel de la page.
3) Réaliser un rafraîchissement partiel de la page

Comprenez d'abord le cycle de vie de vue,

les composants et les pages enveloppés par keepAlive, le cycle de vie exécuté lors de la saisie de la page est : créé->monté->activé
; Parmi eux, créé->monté ne sera exécuté que lors de la première saisie de la page. Le cycle de vie activé sera exécuté à chaque saisie de la page. C'est un cycle de vie de keepAlive, nous mettons donc le. les opérations à effectuer à chaque fois que la page entre dans ce cycle de vie sont suffisantes. Le code suivant :

<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> </template>

La fonction implémentée est de définir le code de vérification dynamique pour qu'il soit vide à chaque fois que l'utilisateur entre. Cette fonction peut également être implémentée d'autres manières, comme en plaçant le composant hors du cache (voir 2. Configuration du composant). cache).

4)

Définir dynamiquement l'attribut route keepAlive

Parfois, après avoir utilisé le cache keepalive, nous voulons que la page ne reste plus en cache, ou définir la page suivante keepalive. À ce moment, nous pouvons modifier la valeur keepAlive de. méta pour supprimer le cache de la page. , utilisez beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave, l'utilisation est la suivante :

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },

2. Cache de configuration des composants

1) Scénario d'utilisationHabituellement, nous mettrons en cache une page de vue, mais parfois. nous avons seulement besoin de mettre en cache la page Un certain composant, ou lors de l'utilisation d'un composant de composant dynamique pour changer de composant, le composant doit être mis en cache.

2) Composants spécifiés de la page de cache

Lorsqu'elles sont utilisées dans App.vue, les pages correspondant à toutes les routes sont les composants correspondant au projet La méthode d'utilisation est la suivante :

Utilisez l'attribut include ou exclure sur le keep-alive. composant, comme suit : Utiliser include

signifie que le composant nommé testKA sera mis en cache

activated() {
	// 页面每次进入将手机动态验证码置为空
   this.$refs.mobPwdCode.inputValue = '';},

Dans la page correspondant au routeur, vous devez définir l'attribut name, comme suit :

// to为即将跳转的路由，from为上一个页面路由beforeRouteLeave(to, from,+ next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false;
    next();}

De plus, l'utilisation de include. est la suivante :

// APP.vue文件，将页面作为组件缓存<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive></router-view>

L'utilisation de l'exclusion est la même que celle de l'inclusion. Représente les composants qui ne sont pas mis en cache. De plus, keep-alive possède également un attribut max, qui représente le nombre maximum de composants mis en cache. Une fois ce nombre atteint, l'instance du composant mis en cache qui n'a pas été accédée depuis le plus longtemps sera détruite avant qu'une nouvelle instance ne soit créée. créé.

export default {
    name:'testKA',// keep-alive中include属性匹配组件name
    data() {return {}},
    activated() {
        // keepalive缓存的页面每次进入都会进行的生命周期
    },}

Lorsqu'il est utilisé pour changer de composant sur une certaine page, l'utilisation est la même que le routage du cache, mais il rétrograde simplement la page en composant, et le composant parent est rétrogradé d'App.vue vers la page de routage correspondante.

3) Résumé

Dans le processus de combat réel, lorsque le composant de cache keepalive a été trouvé,

ne peut pas être utilisé à plusieurs niveaux

 ; Par exemple, lors de l'utilisation de l'attribut include dans App.vue pour faire correspondre name="a" , le nom du cache ne peut correspondre qu'au sous-composant de a (page de routage), mais le composant petit-enfant portant le nom « a » (le composant référencé par la sous-page) ne peut pas être mis en cache.

Si vous souhaitez mettre en cache le composant petit-fils, vous pouvez mettre en cache l'intégralité du sous-composant ou utiliser keepalive dans le sous-composant. Pour les instructions d'utilisation de keepalive, vous pouvez accéder au site officiel pour en savoir plus : https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive[Recommandations associées : "

Tutoriel vue. js

》】

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!