Explication détaillée de l'instance de cache de composant spécifiée par vue

keep-alive est un composant intégré de Vue qui permet aux composants inclus de conserver leur état ou d'éviter un nouveau rendu. Cet article présente principalement le cache des composants désignés de Vue. Les amis qui en ont besoin peuvent se référer à

introduction de keep-alive

keep-alive est Vue A. composant intégré qui permet au composant contenu de conserver son état ou d'éviter un nouveau rendu.

l'utilisation est également très simple :

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

accessoires

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

Meet vue-router

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

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

Cependant, les besoins du produit changent toujours, et il n'y a aucun moyen de l'arrêter...

Problème

Que se passe-t-il si vous souhaitez que seul un certain composant de la vue du 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, ce n'est 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 d'énumérer les noms des composants qui doivent être mis en cache

[Ajouter du sel] 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 avantRouteLeave dans le composant B :

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

Définissez beforeRouteLeave dans le composant C :

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

De cette façon, B peut revenir à A, A ne se rafraîchira pas ; et C renverront Actualiser en atteignant A.

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

Articles connexes :

Exemple de code d'implémentation de téléchargement de la barre de progression Ajax basé sur Blod

Utilisez Promise pour résoudre plusieurs Ajax asynchrones Problème d'imbrication de code causé par la requête

Ajax transmettant le code d'instance JSON

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!