Fonction d'instruction dans Vue3 : les instructions personnalisées rendent votre code plus flexible

Vue est un framework front-end très populaire. Dans le processus d'utilisation de Vue ces dernières années, nous utilisons souvent des instructions pour faire fonctionner l'affichage et le masquage des éléments DOM, tels que v-if et v-show. Cependant, avec la sortie de Vue3, la fonction directive (Directive Function) a apporté des changements et des améliorations majeurs. Une directive très utile a été ajoutée à la directive personnalisée Vue3. Cet article présentera en détail les fonctions d'instruction de Vue3, en particulier l'utilisation et les avantages des instructions personnalisées.

1. Le concept de base de la fonction directive

Dans Vue, la directive est un attribut de préfixe spécial utilisé dans les modèles. La valeur de l'instruction est censée être une expression JavaScript unique (sauf v-for, qui sera mentionné plus tard). La fonction de l'instruction est d'appliquer ses effets associés au DOM de manière réactive lorsque la valeur de l'expression change. Par exemple, en utilisant la directive v-if dans un modèle, vous pouvez contrôler si un élément est affiché en fonction de la valeur d'une expression.

La fonction d'instruction dans Vue3 est une fonction qui peut recevoir quatre paramètres. Elle peut accéder à l'élément auquel l'instruction est liée, ainsi qu'à divers attributs et événements sur l'élément DOM, et peut également interagir avec les composants Vue pour les données. Voici les quatre paramètres de la fonction instruction :

• el : L'élément lié à l'instruction peut utiliser el pour obtenir ou modifier les attributs, styles, etc.

• binding : Un objet contenant les propriétés suivantes :

  • name : Le nom de la directive, à l'exclusion du préfixe v-.
  • value : La valeur de liaison de la directive, par exemple, dans v-my-directive="1 + 1", la valeur de liaison est 2.
  • oldValue : la valeur précédente de la liaison d'instruction, disponible uniquement dans les hooks update et componentUpdated.
  • expression : expression d'instruction sous forme de chaîne. Par exemple, v-my-directive="1 + 1", la valeur de l'expression est "1 + 1".
• vnode : un nœud virtuel généré par la compilation Vue.
• prevVNode : Le nœud virtuel précédent, disponible uniquement dans les hooks update et componentUpdated.

La fonction d'instruction accède aux informations relatives aux instructions via les attributs de l'objet de liaison et exploite l'élément DOM via l'objet el.

Il convient de noter que la fonction d'instruction dans Vue3 est uniquement responsable de l'interaction avec les éléments du DOM. Si un traitement de données ou un traitement de logique métier est requis, d'autres fonctions ou méthodes doivent être appelées dans la fonction d'instruction pour y parvenir.

2. Comment utiliser les instructions personnalisées

Vue3 fournit un moyen très pratique de personnaliser les instructions. Il vous suffit d'appeler la fonction Vue.directive et de transmettre le nom de l'instruction et la fonction d'instruction pour personnaliser une instruction. Voici un exemple simple :

<template>
  <div v-my-directive>Custom Directive</div>
</template>

<script>
  import { directive } from 'vue';

  const myDirective = {
    mounted(el, binding) {
      console.log('custom directive mounted', binding);
    }
  }

  export default {
    directives: {
      'my-directive': myDirective,
    },
  };
</script>

Dans l'exemple ci-dessus, nous avons appelé la fonction Vue.directive et transmis le nom de la directive 'my-directive' et la fonction de directive myDirective. Enregistrez ensuite la directive dans l'option directives du composant et vous pourrez utiliser la directive personnalisée v-my-directive dans le modèle.

La fonction hook montée dans la fonction myDirective sera appelée lorsque l'élément DOM lié est inséré dans l'élément parent. Dans cette fonction, nous pouvons obtenir l'élément DOM actuellement lié via le paramètre el, obtenir la valeur de liaison de l'instruction et d'autres informations via le paramètre de liaison et effectuer les opérations correspondantes.

3. Avantages des instructions personnalisées

Par rapport aux instructions intégrées telles que v-if et v-show, l'avantage des instructions personnalisées est qu'elles peuvent être librement étendues et personnalisées en fonction des besoins de l'entreprise. Voici quelques avantages des instructions personnalisées :

1. Réutilisabilité du code

Les instructions personnalisées peuvent encapsuler la logique de code commune dans une seule instruction, qui peut être réutilisée à plusieurs endroits, réduisant ainsi la charge de travail liée à l'écriture répétée de code.

2. Améliorer la lisibilité du code

Lors de l'utilisation d'instructions intégrées, vous devez mélanger la logique et les vues, ce qui réduit la lisibilité du code, mais l'utilisation d'instructions personnalisées peut séparer la logique et les vues. Amélioration de la clarté et de la lisibilité du code.

3. Maintenabilité améliorée du code

À l'aide d'instructions personnalisées, différentes logiques métier peuvent être traitées séparément, réduisant ainsi la quantité de code et améliorant la maintenabilité du code. Lors de la maintenance du code, la gestion de la logique de liaison des instructions en fonction des différents besoins peut réduire considérablement la complexité du code.

En bref, les instructions personnalisées nous offrent la possibilité de contrôler librement la vue et la logique, ce qui nous rend plus flexibles, plus pratiques et plus efficaces lors de l'écriture de code. C'est une compétence qui mérite d'être maîtrisée.

4. Scénarios d'application d'instructions personnalisées

1. Vérification de formulaire

La vérification de formulaire est un problème courant rencontré dans le développement front-end. Grâce à des instructions personnalisées, nous pouvons encapsuler la logique de vérification dans une seule instruction pour une utilisation facile sous plusieurs formulaires. Par exemple, nous pouvons personnaliser une directive v-validate qui vérifiera si le formulaire est légal lors de sa soumission.

2. Contrôle des autorisations

Grâce à des instructions personnalisées, nous pouvons facilement implémenter la fonction de contrôle des autorisations. Par exemple, nous pouvons personnaliser une directive v-auth qui contrôlera l'affichage d'un élément en fonction des autorisations des utilisateurs.

3. Défilement de page

Lorsque la page défile, il est souvent nécessaire d'écouter les événements de la barre de défilement et de les gérer en conséquence. Grâce à des instructions personnalisées, nous pouvons facilement implémenter la fonction de contrôle de défilement. Par exemple, nous pouvons personnaliser une directive v-scroll, qui contrôlera l'affichage et le masquage des éléments DOM correspondants en fonction du défilement des pages.

4. Limitation et anti-secousse

La limitation et l'anti-secousse sont l'un des moyens d'optimiser les performances des pages. Dans Vue3, les fonctions de limitation et d'anti-tremblement peuvent également être implémentées via des instructions personnalisées. Par exemple, nous pouvons personnaliser une directive v-throttle, qui convertira les événements fréquemment déclenchés en déclencheurs après un intervalle de temps spécifié.

5. Résumé

La fonction de commande est l'un des concepts très importants de Vue. Grâce à des instructions personnalisées, nous pouvons contrôler de manière flexible les vues et la logique, rendant le code plus clair, plus efficace et plus facile à maintenir. Par rapport aux instructions intégrées simples telles que v-if et v-show, les instructions personnalisées sont plus puissantes et adaptées à divers scénarios. Essayez d'utiliser des directives personnalisées pour rendre votre code plus flexible !

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!