Comment Vue implémente la fonction de hook beforeEnter

Cette fois, je vais vous montrer comment Vue implémente la fonction de hook beforeEnter. Quelles sont les précautions pour que Vue implémente la fonction de hook beforeEnter. Voici un cas pratique, jetons un coup d'œil.

Pourquoi avez-vous besoin de créer votre propre fonction de hook beforeEnter ?

Regardez le scénario problématique : il y a une page de liste de mots dans le projet. Chaque cellule indiquera si le mot a été maîtrisé. Cliquez sur la cellule pour accéder à la page de détails, où. vous pouvez apprendre le mot et le marquer. Si le mot est maîtrisé, et vous pouvez également apprendre d'autres mots en cliquant sur les boutons avant et arrière de la page de détails. Ainsi, lorsque je clique pour revenir, la liste de mots doit afficher le dernier statut de tous les utilisateurs de mots.

La relation de la page finale est la suivante :

wordListPage ——> wordDetail (apprendre une série de mots, quitter)—— > ; wordListPage (actualiser la liste de mots)

Pour le scénario ci-dessus, l'utilisation de la fonction Vue cycle de vie n'est pas possible, car les fonctions de cycle de vie de Vue sont telles que : beforeCreate,created, beforeMounted, Mounted , etc., ne seront appelés que lorsque le composant est initialisé, mais lorsque le composant (instance de VM) provient du cache (comme $route.go(-1), keep-alive), la fonction de cycle de vie ne sera plus être appelé. Par conséquent, lorsque je reviens à la page de liste à partir de la page de détails des mots, je ne trouve pas de période appropriée pour démarrer la mise à jour des données. Par conséquent, le scénario ci-dessus ne peut pas être correctement géré.

Bien sûr, les scénarios ci-dessus sont relativement rares, mais l'existence de la fonction hook beforeEnter est toujours nécessaire.

Construire la fonction de hook beforeEnter

Points de connaissance des dépendances :

1. Routage : vue-router

2. Mixin : mixin

3. Bus événementiel central

1. Créer un bus d'événements central

Pour le bus d'événements central, une compréhension simple consiste à créer une instance publique de Vue (EventBus) et à utiliser la même instance à différents endroits pour déclencher EventBus.$emit ('demo' ), utilisez une instance publique Vue pour écouter EventBus.$on('demo',() => {}) où vous souhaitez écouter l'événement. Pour parler franchement, il existe un tel composant public qui envoie des messages à différents endroits et écoute les messages à différents endroits. Ainsi, l'envoi et la réception de messages sont implémentés par lui-même, c'est pourquoi nous l'appelons le bus d'événements central.

Le code est le suivant : libs/EventBus.js

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

Voyons comment l'utiliser

Fonction de hook de routage avantEach

Utilisez la fonction de hook beforeEach pour déclencher l'événement beforeEnter du composant correspondant lors du changement de routage.

Le code est le suivant : 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 Créez un objet mix-in global

Ici, nous implémentons. la surveillance et les composants des événements de changement de route Déclenchement de la fonction de hook d'instance avantEnter.

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

Pour cet objet mixin, il est possible d'utiliser un mixin global ou local.

Mix-in global : main.js

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

4. Utiliser dans des composants

tels que : home.vue

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

À ce stade, notre beforeEnter est terminé. Vous pouvez faire une démo pour le tester vous-même. Actuellement, je l'utilise dans de nombreux projets.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer l'état de mise à jour de la méthode vuex dans le composant parent et le composant enfant ne peut pas mettre à jour le rendu à temps

Comment utiliser vue implémente l'optimisation des performances de vérification SMS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!