Heim > Artikel > Web-Frontend > Integrierte Vue-Komponenten: Einführung und Verwendung von Keep-Alive-Komponenten (mit Code)
Der Inhalt dieses Artikels befasst sich mit den integrierten Komponenten von Vue: Die Einführung und Verwendung von Keep-Alive-Komponenten (mit Code) Es hat einen gewissen Referenzwert. Ich hoffe, es wird hilfreich sein Dir zu helfen.
keep-alive
ist eine integrierte Komponente von Vue, die es integrierten Komponenten ermöglicht, ihren Zustand beizubehalten oder ein erneutes Rendern zu vermeiden.
Nach der Vue-Version 2.1.0 wurden keep-alive
zwei neue Attribute hinzugefügt: include (eingeschlossene Komponenten werden zwischengespeichert) undexclude (ausgeschlossene Komponenten werden nicht zwischengespeichert und haben eine höhere Priorität als include).
Verwendung
<keep-alive include='include_components' exclude='exclude_components'> <component> <!-- 该组件是否缓存取决于include和exclude属性 --> </component> </keep-alive>
Parametererklärunginclude
– Zeichenfolge oder regulärer Ausdruck, nur Komponenten mit übereinstimmenden Namen werden zwischengespeichert exclude
– Zeichenfolge oder regulärer Ausdruck Ausdruck, beliebig Komponente mit passendem Namen wird nicht zwischengespeichert
Die Include- und Exclude-Attribute ermöglichen das bedingte Zwischenspeichern von Komponenten. Beide können als durch Kommas getrennte Zeichenfolge, als regulärer Ausdruck oder als Array dargestellt werden. Wenn Sie reguläre Ausdrücke oder Arrays verwenden, verwenden Sie unbedingt v-bind
!
Verwendungsbeispiele
<!-- 逗号分隔字符串,只有组件a与b被缓存。 --> <keep-alive include="a,b"> <component></component> </keep-alive> <!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) --> <keep-alive :include="/a|b/"> <component></component> </keep-alive> <!-- Array (需要使用 v-bind,被包含的都会被缓存) --> <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>
router.meta
, um klar anzugeben, ob die Komponente zwischengespeichert werden muss. router.meta
konfigurieren Sie
... { path: 'edit', component: () => import('@/views/site/edit'), name: 'site.edit', meta: { title: '网址编辑', hidden: true, cache: false } }, { path: 'list', component: () => import('@/views/site/list'), name: 'site.list', meta: { title: '网址列表', hidden: false, cache: true } }, ...
und verwenden Sie dann das Tag v-if
, um festzustellen ob Caching erforderlich ist
<!-- 缓存 --> <keep-alive> <router-view v-if="$route.meta.cache"></router-view> </keep-alive> <!-- 不缓存 --> <router-view v-if="!$route.meta.cache"></router-view>
{ path: '/', name: 'A', component: A, meta: { cache: true // 需要被缓存 } }
Komponenten-C-Konfiguration
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.cache = true; // 让 A 缓存,即不刷新 next(); } };
Hinweise
Wenn die Komponente zwischengespeichert ist, wird die Methode
nicht ausgeführt. Im Allgemeinen fordern wir Daten an und laden die Liste in der erstellten Methode. Wenn die aktuelle Seite zwischengespeichert und die Hintergrunddaten aktualisiert werden, werden die Daten zu diesem Zeitpunkt nicht im Vordergrund angezeigt manuell.export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.cache = false; // 让 A 不缓存,即刷新 next(); } };
Verwandte Empfehlungen: created()
Vue-Zusammenfassung der Verwendung integrierter Anweisungen
Vue-Komponentenoptions-Requisiten
Das obige ist der detaillierte Inhalt vonIntegrierte Vue-Komponenten: Einführung und Verwendung von Keep-Alive-Komponenten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!