Explication détaillée des étapes de mise en cache pour Vue à l'aide des composants spécifiés

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation de la mise en cache de composants spécifiés dans Vue. Quelles sont les précautions pour utiliser la mise en cache de composants spécifiés dans Vue Voici un cas pratique, prenons un. regarder.

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();
 }
};

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

Lecture recommandée :

Explication détaillée de l'utilisation des slots/scoped dans Vue

Étapes pour implémenter js de la même manière- politique d'origine et accès inter-domaines Explication détaillée

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!