Méthode d'optimisation de projet Vue grâce à la mise en cache des données persistantes

Cet article présente principalement la méthode d'optimisation des projets Vue via la mise en cache des données persistantes. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

est un composant intégré de Vue, qui peut conserver l'état dans la mémoire pendant le changement de composant pour empêcher le rendu répété du DOM.

Lors de l'encapsulation de composants dynamiques, les instances de composants inactifs sont mises en cache au lieu de les détruire. Comme , est un composant abstrait : il ne restitue pas un élément DOM par lui-même et n'apparaît pas non plus dans la chaîne de composants parent.

prop :

1. include : chaîne ou expression régulière. Seuls les composants correspondants seront mis en cache.

2. exclure : chaîne ou expression régulière. Tous les composants correspondants ne seront pas mis en cache.

Réduisez le nombre de requêtes adressées au serveur grâce au keep-alive fourni par vue Components pour éviter de charger plusieurs fois les composants correspondants et réduire la consommation de performances. Par exemple, les données d'une page, y compris les images, le texte, etc., ont été chargées par l'utilisateur, puis l'utilisateur passe à une autre interface en cliquant dessus. Revenez ensuite à l’interface d’origine depuis une autre interface. S'il n'est pas défini, les informations de l'interface d'origine seront à nouveau demandées au serveur. Le keep-alive fourni par vue peut enregistrer les données demandées de la page, réduire le nombre de requêtes et améliorer l'expérience utilisateur.

Les composants de mise en cache sont divisés en deux types, les composants qui mettent en cache les pages de l'ensemble du site ou les composants qui mettent en cache une partie des pages.

1. Mettez en cache toutes les pages, adapté aux situations où il y a des demandes pour chaque page. La méthode est la suivante : enveloppez la vue du routeur qui doit être mise en cache avec la balise keep-alive.

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

2. La mise en cache de certains composants ou pages peut être réalisée en utilisant l'attribut router.meta par jugement. La méthode est la suivante :

<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="! $route.meta.keepAlive">
</router-view>

 routers:[
      {  path: '/home',
        name: home,
        meta:{keepAlive: true}   // 设置为true表示需要缓存，不设置或者false表示不需要缓存                    }
     ]

<keep-alive include="a,b">
<component></component>
</keep-alive>   
<keep-alive exclude="c,d">
<component></component>
</keep-alive>

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile pour votre étude, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Introduction à l'utilisation des accessoires d'option de composant Vue

Cadre d'application universel Vue.js-Nuxt Analyse .js

Introduction à la méthode de configuration simple d'axios avec 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!