Verwendung des Vue-Komponentencaches

Dieses Mal werde ich Ihnen die Verwendung des Vue-Komponenten-Caches vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung des Vue-Komponenten-Cache? Das Folgende ist ein praktischer Fall.

Keep-Alive-Einführung

Keep-Alive ist eine integrierte Komponente von Vue, die es den enthaltenen Komponenten ermöglicht, ihren Zustand beizubehalten oder einen Neustart zu vermeiden machen.

Die Verwendung ist auch sehr einfach:

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

props

include – String oder regulärer Ausdruck, nur passende Komponenten werden zwischengespeichert
exclude – Zeichenfolge oder regulärer Ausdruck, jede passende Komponente wird 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>

trifft auf vue-router

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

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

Das Produkt muss jedoch ständig seine Anforderungen ändern, und es gibt keine Möglichkeit, dies zu stoppen...

Frage

Was soll ich tun, wenn nur eine bestimmte Komponente in der Router-Ansicht zwischengespeichert werden soll?

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: Man muss den Namen der Komponente kennen, keine gute Wahl, wenn das Projekt komplex ist

Fügen Sie das router.meta-Attribut hinzu

// 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: Keine Notwendigkeit Zählen Sie die Komponenten auf, die Cache-Komponentenname sein müssen

[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 Meta-Attribut in Route A:

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

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

Auf diese Weise kann B zu zurückkehren A, A wird nicht aktualisiert, aber C kehrt zu A zurück und aktualisiert sich.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vue+axios verbietet die Anmeldung

Eine Zusammenfassung der Verwendung von vue-berechneten Eigenschaften

Das obige ist der detaillierte Inhalt vonVerwendung des Vue-Komponentencaches. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!