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>

Le cache peut être implémenté en écrivant la première demande de déclenchement dans le hook créé. Par exemple, si vous passez de la page de liste à la page de détails, vous serez toujours sur la page d'origine lorsque vous reviendrez.

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>

Les paramètres du routeur sont les suivants :

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

peut également être défini via les nouveaux attributs d'inclusion/exclusion. La signification vient du nom, inclure signifie inclusion, exclure signifie sauf. Ici, vous devez utiliser le nom du composant pour le définir, le nom doit donc être ajouté. L'ajout des composants a et b nécessite une mise en cache, tandis que les composants c et d ne nécessitent pas de mise en cache. Il s'écrit ainsi :

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

L'optimisation des projets vue peut également être réalisée grâce au chargement à la demande de composants, tout comme le chargement paresseux des images si le client ne voit pas du tout ces images, mais que nous les chargeons toutes lors de l'ouverture de la page, cela augmentera considérablement le temps de demande et réduira l'expérience utilisateur. Le chargement paresseux est utilisé sur de nombreux sites Web, tels que les sites Web commerciaux tels que Taobao, JD.com, etc., qui contiennent de nombreux liens d'images. Si vous faites défiler rapidement vers le bas, vous pouvez voir la condition de chargement de l'image. Pour des instructions spécifiques sur la façon de l'utiliser, vous pouvez lire un autre article : Chargement à la demande de la page d'optimisation du projet Vue (vue+webpack)

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 !

Recommandations associées :

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!