Comment optimiser via keep-alive in vue

Cet article présente principalement la méthode d'optimisation des projets Vue via la mise en cache des données persistantes. L'éditeur pense qu'elle est plutôt bonne, je vais donc la partager avec vous maintenant et la donner comme référence. Suivons l'éditeur pour y jeter un œil.

est un composant intégré de Vue. Il peut conserver l'état dans la mémoire lors du changement de composant pour éviter un 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 Chargez plusieurs fois les composants correspondants pour 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 entières du site ou les composants qui mettent en cache des pages partielles.

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

Le cache peut être réalisé 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.

<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 :

les paramètres du routeur sont les suivants :

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

peuvent également être définis via le nouvel attribut inclure/exclure. 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 comme suit :

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

L'optimisation du projet Vue peut également être réalisée grâce au chargement de composants à la demande, tout comme le chargement paresseux d'images si le client ne voit pas ces images. du tout, mais nous les ouvrons. Lorsque la page est entièrement chargée, cela augmentera considérablement le temps de requête 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 pages pour l'optimisation du projet vue (vue+webpack)

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

Ce qui précède est ce que j'ai compilé pour vous, j'espère que ce sera le cas. utile pour vous à l'avenir.

Articles connexes :

Comment utiliser JQUERY pour implémenter plusieurs requêtes AJAX

Comment utiliser le format de données de formulaire pour transférer des fichiers dans NodeJs

Comment implémenter le chargement paresseux d'images dans le mini-programme WeChat

Comment utiliser js pour obtenir un effet d'image focus

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!