Composants intégrés à Vue : introduction et utilisation des composants keep-alive (avec code)

Le contenu de cet article concerne les composants intégrés de Vue : l'introduction et l'utilisation de composants keep-alive (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. à vous.

keep-alive Introduction

keep-alive est un composant intégré de Vue qui permet aux composants inclus de conserver leur état ou d'éviter un nouveau rendu.
Après la version vue 2.1.0, keep-alivedeux nouveaux attributs ont été ajoutés : inclure (les composants inclus sont mis en cache) et exclure (les composants exclus ne sont pas mis en cache et ont une priorité plus élevée que l'inclusion).

Utilisation

<keep-alive include=&#39;include_components&#39; exclude=&#39;exclude_components&#39;>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

Explication des paramètres
include - chaîne ou expression régulière, seuls les composants dont les noms correspondent seront mis en cache
exclude - chaîne ou expression régulière, tout composant avec un nom correspondant ne sera pas mis en cache
Les attributs d'inclusion et d'exclusion permettent aux composants d'être mis en cache de manière conditionnelle. Les deux peuvent être représentés sous forme de chaîne séparée par des virgules, d’expression régulière ou de tableau. Lorsque vous utilisez des expressions régulières ou des tableaux, assurez-vous d'utiliser v-bind!

Exemples d'utilisation

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component></component>
</keep-alive>

Scénarios d'utilisation

1 Bien qu'il puisse être inclus via des expressions régulières. et exclure certains composants, mais ce qui est plus couramment utilisé est de spécifier clairement si le composant doit être mis en cache via l'attribut router.meta

configuration router.meta

...
    {
        path: 'edit',
        component: () => import('@/views/site/edit'),
        name: 'site.edit',
        meta: {
            title: '网址编辑',
            hidden: true,
            cache: false
        }
    },
    {
        path: 'list',
        component: () => import('@/views/site/list'),
        name: 'site.list',
        meta: {
            title: '网址列表',
            hidden: false,
            cache: true
        }
    },
...

puis d'utiliser. la balise

pour déterminer si la mise en cache est nécessairev-if

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

<!-- 不缓存 -->
<router-view v-if="!$route.meta.cache"></router-view>

2. Différents changements de page ont des règles d'actualisation différentes : B->A ne s'actualise pas, C-A s'actualise

Configuration de l'itinéraire A

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

Configuration du composant B

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

Configuration du composant C

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

Remarques

Si le composant est mis en cache, le

La méthode ne sera pas exécutée. Généralement, nous demanderons des données et chargerons la liste dans la méthode de création. Si la page actuelle est mise en cache et que les données d'arrière-plan sont mises à jour, les données ne seront pas affichées au premier plan à ce moment-là, la page doit être actualisée. manuellement. created()Donc, la nécessité ou non de mettre le composant en cache dépend de certaines choses

export default {
        data() {
            return {};
        },

        created() {
            // do some thing...
        },
        methods: {},
};

Recommandations associées :

vue de sélection personnalisée des composants intégrés

Résumé de l'utilisation des instructions intégrées dans vue

Accessoires d'option de composant 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!