So verwenden Sie den Cache in Vue

Dieses Mal zeige ich Ihnen, wie Sie den Cache in Vue verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung des Caches in Vue?

Keep-Alive-Einführung

Keep-Alive ist eine integrierte Komponente von Vue, die es integrierten Komponenten ermöglicht, ihren Zustand beizubehalten oder ein erneutes Rendern zu vermeiden. Die Verwendung von

ist ebenfalls sehr einfach:

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

props

include - string oder Regulärer Ausdruck, nur übereinstimmende Komponenten werden zwischengespeichert
Ausschließen – Zeichenfolge oder Regex , alle übereinstimmenden Komponenten werden nicht zwischengespeichert

// 组件 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>

mit Vue-Router

router-view ist auch eine Komponente, wenn es direkt in Keep-Alive verpackt ist, werden alle view-Komponenten, die dem Pfad entsprechen, zwischengespeichert:

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

Allerdings , das Produkt muss ständig seine Anforderungen ändern, und nichts kann es aufhalten...

Problem

Wenn Sie nur etwas in der Router-Ansicht möchten, wird die Komponente zwischengespeichert , was soll ich tun?

Verwenden Sie include/exclude
um das router.meta-Attribut hinzuzufügen
Verwenden Sie include/exclude

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

exclude Das Beispiel ist ähnlich.

Nachteile: Der Name der Komponente muss bekannt sein, keine gute Wahl, wenn das Projekt komplex ist

router.meta-Attribut hinzufügen

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

Vorteile: Nicht erforderlich um Beispiele zu geben Der Name der Komponente, die zwischengespeichert werden muss

[Salt] Verwenden Sie router.meta zum Erweitern

Angenommen, es gibt 3 Routen: A, B, C.

Anforderungen:

Standardmäßig A anzeigen
B springt zu A, A wird nicht aktualisiert
C springt zu A, A wird aktualisiert
Implementierungsmethode

In Setze das Metaattribut in Route A:

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

Set beforeRouteLeave in Komponente B:

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

Setze beforeRouteLeave in Komponente C:

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

This Es kann erkannt werden, dass A nicht aktualisiert wird, wenn B zu A zurückkehrt. Wenn C jedoch zu A zurückkehrt, wird es aktualisiert.

Zusammenfassung

Die Routing-Methode ist gut, Sie müssen sich nicht darum kümmern, zu welcher Seite gesprungen wird, nur router.go(- 1) kann zurückgehen, es sind keine zusätzlichen Parameter erforderlich.

In Nicht-Einzelseitenanwendungen kann Keep-Alive jedoch nicht effektiv zwischengespeichert werden = =

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen , bitte achten Sie auf PHP Chinesisch Andere verwandte Artikel online!

Empfohlene Lektüre:

Anleitung für Vue-Neulinge

Eine detaillierte Erklärung der Schritte zum Aufrufen untergeordneter Komponenten aus Angular übergeordnete Komponenten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Cache in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!