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-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.
Nach der Vue-Version 2.1.0 wurden keep-alivezwei 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=&#39;include_components&#39; exclude=&#39;exclude_components&#39;>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

Parametererklärung
include – 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="[&#39;a&#39;, &#39;b&#39;]">
  <component></component>
</keep-alive>

Verwendungsszenarien

1 Obwohl Sie einige durch reguläre Ausdrücke einschließen und ausschließen können Komponenten, aber häufiger verwendet, verwenden Sie das Attribut 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>

2. Unterschiedlicher Seitenwechsel hat unterschiedliche Aktualisierungsregeln: B-> Konfiguration

{
        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.

Ob die Komponente zwischengespeichert werden muss, hängt also von den Dingen ab

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

Verwandte Empfehlungen: created()

vue Benutzerdefinierte Auswahl integrierter Komponenten

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!