Wie Vue die Hook-Funktion beforeEnter implementiert

Dieses Mal zeige ich Ihnen, wie Vue die BeforeEnter-Hook-Funktion implementiert. Welche Vorsichtsmaßnahmen es gibt, damit Vue die BeforeEnter-Hook-Funktion implementiert?

Warum müssen Sie Ihre eigene beforeEnter-Hook-Funktion erstellen?

Sehen Sie sich das Problemszenario an: In jeder Zelle wird angezeigt, ob das Wort gemeistert wurde. Klicken Sie auf die Zelle, um die Detailseite aufzurufen Sie können das Wort lernen und markieren, ob das Wort beherrscht wird. Sie können auch andere Wörter lernen, indem Sie auf der Detailseite auf die Schaltflächen „Vorwärts“ und „Zurück“ klicken. Wenn ich also auf „Zurück“ klicke, sollte in der Wortliste der aktuelle Status aller Wortbenutzer angezeigt werden.

Die letzte Seitenbeziehung ist wie folgt:

wordListPage ——> wordDetail (eine Reihe von Wörtern lernen, exit)—— > ; wordListPage (Wortliste aktualisieren)

Für das obige Szenario ist die Verwendung der Vue-Funktion Lebenszyklus nicht möglich, da die Lebenszyklusfunktionen von Vue wie folgt lauten: beforeCreate, erstellt, beforeMounted, montiert usw. werden nur aufgerufen, wenn die Komponente initialisiert wird. Wenn die Komponente (VM-Instanz) jedoch aus dem Cache kommt (z. B. $route.go(-1), Keep-Alive), wird die Lebenszyklusfunktion nicht mehr ausgeführt aufgerufen werden. Wenn ich von der Wortdetailseite zur Listenseite zurückkehre, kann ich daher keinen geeigneten Zeitraum zum Starten der Datenaktualisierung finden. Daher kann das obige Szenario nicht gut gehandhabt werden.

Natürlich sind die oben genannten Szenarien relativ selten, aber die Existenz der beforeEnter-Hook-Funktion ist dennoch erforderlich.

Konstruieren Sie die beforeEnter-Hook-Funktion

Abhängigkeitswissenspunkte:

1. Routing: vue-router

2. Mixin: mixin

3. Zentraler Veranstaltungsbus

1. Erstellen Sie einen zentralen Ereignisbus

Für den zentralen Ereignisbus besteht ein einfaches Verständnis darin, eine öffentliche Vue-Instanz (EventBus) zu erstellen und dieselbe Instanz an verschiedenen Orten zu verwenden, um EventBus.$emit auszulösen ('demo' )-Nachricht verwenden Sie eine öffentliche Vue-Instanz, um EventBus.$on('demo',() => {}) dort abzuhören, wo Sie das Ereignis abhören möchten. Um es ganz klar auszudrücken: Es gibt eine solche öffentliche Komponente, die Nachrichten an verschiedene Orte sendet und an verschiedenen Orten auf Nachrichten wartet. Das Senden und Empfangen von Nachrichten wird also von selbst implementiert, daher nennen wir es den zentralen Ereignisbus.

Der Code lautet wie folgt: libs/EventBus.js

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

Sehen wir uns an, wie man ihn verwendet

2. Routing-Hook-Funktion beforeEach

Durch die beforeEach-Hook-Funktion wird beim Routenwechsel das beforeEnter-Ereignis der entsprechenden Komponente ausgelöst.

Der Code lautet wie folgt: router/index.js

import EventBus from '@/libs/EventBus';
router.beforeEach((to, from, next) => {
  //如：EventBus.$emit('homeBeforeEnter');
  EventBus.$emit(to.name + 'BeforeEnter');
  
  if (to.matched.some(route => route.meta.isAuth)) {
    ...
    next()
  } else {
    next()
  }
  
})

3. Erstellen Sie ein globales Mix-In-Objekt

Hier die Überwachung von Routenwechselereignisse und Komponenteninstanz-Hooks werden implementiert. Auslösen der Funktion beforeEnter.

libs/beforeEnterMixin.js

import EventBus from './EventBus';
export default {
  beforeCreate() {
    //获取当前路由名称，与前面使用to.name对应
    let vmName = this.$route.name;
    if (!vmName) {
      return;
    }
    // 当组件初始化时，先触发一次，后续将不再调用
    this.$options.beforeEnter();
    const beforeEnter = vmName + 'BeforeEnter';
    //监听路由切换时触发的...BeforeEnter事件
    //通过this.$options获取到实例中的beforeEnter钩子函数
    //监听到...BeforeEnter事件后，触发钩子函数beforeEnter调用
    EventBus.$on(beforeEnter, this.$options.beforeEnter);
  },
  //该函数在这里只作为占位，没有实际意义
  beforeEnter() {}
};

Für dieses Mixin-Objekt ist es möglich, globales oder lokales Mixin zu verwenden.

Globaler Mix-in: main.js

import beforeEnterMixin from '@/libs/beforeEnterMixin';
Vue.mixin(beforeEnterMixin);

4. Verwendung in Komponenten

wie: home.vue

<template>
  <p>
    首页
  </p>
</template>
<script>
export default {
  beforeEnter() {
    console.log('首页 beforeEnter...');
  },
  created() {
    console.log('首页 created...')
  }
}
</script>

Zu diesem Zeitpunkt ist unser beforeEnter fertig. Sie können eine Demo erstellen, um es selbst zu testen.

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:

Wie man mit dem Aktualisierungsstatus der Vuex-Methode in der übergeordneten Komponente umgeht und die untergeordnete Komponente das Rendering nicht rechtzeitig aktualisieren kann

So verwenden Sie vue zur Optimierung der SMS-Überprüfungsleistung

Das obige ist der detaillierte Inhalt vonWie Vue die Hook-Funktion beforeEnter implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!