Comment utiliser le cache dans vue

Cette fois, je vais vous montrer comment utiliser le cache dans Vue. Quelles sont les précautions pour utiliser le cache dans Vue Voici un cas pratique, jetons un oeil.

Introduction à Keep-alive

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

l'utilisation est également très simple :

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

props

include - string ou Expression régulière, seuls les composants correspondants seront mis en cache
exclude - string ou regex , 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>

avec vue-router

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

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

Cependant. , les produits doivent toujours changer leurs exigences, et il n'y a aucun moyen de les arrêter...

Problème

Si vous voulez seulement quelque chose en vue routeur Le composant est mis en cache, que dois-je faire ?

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.

Résumé

La méthode de routage est bonne, vous n'avez pas besoin de vous soucier de la page à laquelle accéder, juste router.go(- 1) peut revenir en arrière, aucun paramètre supplémentaire n'est requis.

Cependant, dans les applications qui ne comportent pas une seule page, le keep-alive ne peut pas être mis en cache efficacement = =

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 faire attention à php Chinois Autres articles connexes en ligne !

Lecture recommandée :

Instructions pour les débutants à vue

Une explication détaillée des étapes pour appeler des composants enfants depuis Angular composants parents

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!