Detaillierte Erläuterung der von Vue angegebenen Komponenten-Cache-Instanz

Keep-Alive ist eine integrierte Komponente von Vue, die es den enthaltenen Komponenten ermöglicht, ihren Zustand beizubehalten oder ein erneutes Rendern zu vermeiden. In diesem Artikel wird hauptsächlich der von Vue vorgesehene Komponenten-Cache vorgestellt. Freunde, die ihn benötigen, können sich auf

Keep-Alive-Einführung

Keep-Alive ist Vue A beziehen Integrierte Komponente, die es der enthaltenen Komponente ermöglicht, ihren Zustand beizubehalten oder ein erneutes Rendern zu vermeiden.

Die Verwendung ist ebenfalls sehr einfach:

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

props

include – Zeichenfolge oder regulärer Ausdruck , nur übereinstimmende Komponenten werden zwischengespeichert
Ausschließen – Zeichenfolge oder regulärer Ausdruck, 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>

Meet vue-router

router-view ist auch eine Komponente. Wenn es direkt in Keep-Alive verpackt ist, werden alle mit dem Pfad übereinstimmenden Ansichtskomponenten zwischengespeichert:

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

Allerdings ändert sich die Nachfrage nach dem Produkt ständig, und es gibt keine Möglichkeit, sie aufzuhalten...

Problem

Was sollte ich das tun, wenn ich nur eine bestimmte Komponente in der Router-Ansicht zwischenspeichern möchte?

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

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: Die Namen der Komponenten, die zwischengespeichert werden müssen, müssen nicht aufgelistet werden

[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 // 需要被缓存
 }
}

Setze beforeRouteLeave in Komponente B:

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

BeforeRouteLeave in der C-Komponente festlegen:

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

Auf diese Weise kann B zu A zurückkehren, A wird nicht aktualisiert und C wird aktualisiert, wenn dies der Fall ist kehrt zu A zurück.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Fortschrittsbalken-Download-Implementierungsbeispielcode basierend auf Blod

Verwenden Sie Promise, um mehrere asynchrone Ajax zu lösen Code-Verschachtelungsproblem verursacht durch Anfrage

Ajax übergibt JSON-Instanzcode

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der von Vue angegebenen Komponenten-Cache-Instanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!