Utilisation du cache des composants vue

Cette fois, je vais vous présenter l'utilisation du cache de composants vue. Quelles sont les précautions à prendre pour utiliser le cache de composants vue ?

Introduction à Keep-alive

keep-alive est un composant intégré de Vue qui permet aux composants inclus de conserver leur état ou d'éviter de redémarrer rendre.

L'utilisation est également très simple :

<keep-alive>
 <component>
 <!-- 该组件将被缓存！ -->
 </component>
</keep-alive>

props

include - chaîne ou expression régulière, seuls les composants correspondants seront mis en cache
exclure - chaîne ou expression régulière, tous les composants correspondants ne seront pas mis en cache

// 组件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}
<keep-alive include="a">
 <component>
 <!-- name 为 a 的组件将被缓存！ -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive exclude="a">
 <component>
 <!-- 除了 name 为 a 的组件都将被缓存！ -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive include="test-keep-alive">
 <!-- 将缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>
<keep-alive include="a,b">
 <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
 <component :is="view"></component>
</keep-alive>
<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
 <!-- 将不缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

rencontre vue-router

router-view est également un composant, s'il l'est directement empaquetés dans keep-alive, tous les composants de vue correspondant au chemin seront mis en cache :

<keep-alive>
 <router-view>
 <!-- 所有路径匹配到的视图组件都会被缓存！ -->
 </router-view>
</keep-alive>

Cependant, le produit doit toujours modifier ses exigences, et il n'y a aucun moyen de l'arrêter...

Question

Que dois-je faire si je souhaite que seul un certain composant de la vue routeur soit mis en cache ?

Utilisez include/exclude
pour ajouter l'attribut router.meta
Utilisez include/exclude

// 组件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}
<keep-alive include="a">
 <router-view>
 <!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
 </router-view>
</keep-alive>

exclude L'exemple est similaire.

Inconvénients : Besoin de connaître le nom du composant, pas un bon choix lorsque le projet est complexe

Ajouter l'attribut router.meta

// routes 配置
export default [
 {
 path: '/',
 name: 'home',
 component: Home,
 meta: {
 keepAlive: true // 需要被缓存
 }
 }, {
 path: '/:id',
 name: 'edit',
 component: Edit,
 meta: {
 keepAlive: false // 不需要被缓存
 }
 }
]
<keep-alive>
 <router-view v-if="$route.meta.keepAlive">
 <!-- 这里是会被缓存的视图组件，比如 Home！ -->
 </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
 <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>

Avantages : Pas besoin pour donner des exemples Le nom du composant qui doit être mis en cache

[Salt] Utilisez router.meta pour développer

Supposons qu'il y ait 3 routes : A, B, C.

Exigences :

Afficher A par défaut
B passe à A, A ne s'actualise pas
C passe à A, A s'actualise
Méthode de mise en œuvre

Dans Définir l'attribut méta dans la route A :

{
 path: '/',
 name: 'A',
 component: A,
 meta: {
 keepAlive: true // 需要被缓存
 }
}

Définir beforeRouteLeave dans le composant B :

export default {
 data() {
 return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
 to.meta.keepAlive = true; // 让 A 缓存，即不刷新
 next();
 }
};

Définir beforeRouteLeave dans le composant C :

export default {
 data() {
 return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由的 meta
 to.meta.keepAlive = false; // 让 A 不缓存，即刷新
 next();
 }
};

This On peut se rendre compte que lorsque B revient à A, A ne sera pas rafraîchi, mais que lorsque C reviendra à A, il sera rafraîchi.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

vue+axios interdit la connexion

Un résumé de l'utilisation des propriétés calculées de vue

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!