Apprenez-en plus sur les Hooks dans Vue et parlez de son importance pour Vue !

Que signifient les Hooks pour Vue ? Cet article vous amènera à comprendre les Hooks dans Vue et à parler de son importance pour Vue. J'espère qu'il sera utile à tout le monde !

Les Hooks dont nous allons parler dans cet article sont différents des Lifecycle Hooks (hooks de cycle de vie), qui ont été introduits dans React dans la v16.7.0-alpha bien que les Hooks aient été proposés par React, leur essence est ; Cet important mécanisme de combinaison de code est très bénéfique pour l'ensemble du système de framework JavaScript ; prenez un moment aujourd'hui pour en parler en détail : Que signifie Hooks pour Vue ?

Les hooks offrent un moyen plus clair d'organiser le code afin que le code puisse être réutilisé et, plus important encore, ils permettent à différentes parties logiques de communiquer et de travailler ensemble. [Recommandations associées : Tutoriel vidéo vue.js]

Contexte du problème

Pourquoi les Hooks sont-ils levés ? En ce qui concerne React, le contexte initial du problème est le suivant :

Quand il s'agit d'exprimer le concept d'État, les classes sont la forme organisationnelle la plus courante. La classe elle-même a quelques problèmes, tels que des relations de liaison longues et compliquées, qui la rendent difficile à lire, et la direction de Cela rend toujours les gens confus

Non seulement cela, en termes de réutilisation, le modèle d'utilisation des outils de rendu ou de haute qualité ; -l'ordre des classes de composants est très difficile Commun, mais il est facile de tomber dans la "pyramide du destin" (Pyramide du Destin), qui peut être comprise comme des relations d'imbrication excessives

Hooks est là pour résoudre ces problèmes ; nous permettent d'utiliser des appels de fonction pour définir l'état des composants Logique, ces fonctions sont plus composables et réutilisables en même temps, l'accès à l'état et la maintenance peuvent toujours être effectués 

Exemple : Le code de @dan_abramov de #ReactConf2018

 ;
• Figure ①

• Figure ②

Il y a une transformation de la figure ① en figure ②, le code du composant est recombiné, puis exporté sous forme de fonctions pour une réutilisation externe

Dans ; En termes de maintenance, Hooks fournit un moyen unique et fonctionnel de gérer la logique partagée et potentiellement de réduire la taille du code.

Vue Hooks

Alors pourquoi utilisons-nous des Hooks dans Vue ? Après tout, il n'y a pas de classes fréquemment utilisées dans Vue ; dans Vue, nous utilisons des mixins pour résoudre la même logique de réutilisation des composants ;

Quel est le problème avec les mixins ? Hooks peut-il le résoudre ?

Il y a deux problèmes principaux :

• les mixins ne peuvent pas transférer le statut ;

• La source de la logique n'est pas clairement expliquée ;

Les hooks peuvent bien résoudre ces deux points ; Passage du statut

Hooks1

import { useData, useMounted } from 'vue-hooks';

export function windowwidth() {
  const data = useData({
    width: 0
  })

  useMounted(() => {
    data.width = window.innerWidth
  })

  // this is something we can consume with the other hook
  return {
    data
  }
}

Hooks2

// the data comes from the other hook
export function logolettering(data) {
  useMounted(function () {
    // this is the width that we stored in data from the previous hook
    if (data.data.width > 1200) {
      // we can use refs if they are called in the useMounted hook
      const logoname = this.$refs.logoname;
      Splitting({ target: logoname, by: "chars" });

      TweenMax.staggerFromTo(".char", 5,
        {
          opacity: 0,
          transformOrigin: "50% 50% -30px",
          cycle: {
            color: ["red", "purple", "teal"],
            rotationY(i) {
              return i * 50
            }
          }
        },
        ...

Passage de la valeur entre deux hooks :

<script>
import { logolettering } from "./../hooks/logolettering.js";
import { windowwidth } from "./../hooks/windowwidth.js";

export default {
  hooks() {
    logolettering(windowwidth());
  }
};
</script>

Nous pouvons utiliser la logique de combinaison Hooks dans toute l'application

Effacer la source

Dans le src/h ; dossier ooks, un Hooks est créé pour implémenter : lorsque la boîte de dialogue est ouverte pour afficher le contenu, la page est mise en pause et après avoir consulté la boîte de dialogue, la page est autorisée à défiler à nouveau.

Il est susceptible d'être utilisé plusieurs fois dans l'application ;

import { useDestroyed, useMounted } from "vue-hooks";

export function preventscroll() {
  const preventDefault = (e) => {
    e = e || window.event;
    if (e.preventDefault)
      e.preventDefault();
    e.returnValue = false;
  }

  // keycodes for left, up, right, down
  const keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  const preventDefaultForScrollKeys = (e) => {
    if (keys[e.keyCode]) {
      preventDefault(e);
      return false;
    }
  }

  useMounted(() => {
    if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
    window.onwheel = preventDefault; // modern standard
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
    window.touchmove = preventDefault; // mobile
    window.touchstart = preventDefault; // mobile
    document.onkeydown = preventDefaultForScrollKeys;
  });

  useDestroyed(() => {
    if (window.removeEventListener)
      window.removeEventListener('DOMMouseScroll', preventDefault, false);

    //firefox
    window.addEventListener('DOMMouseScroll', (e) => {
      e.stopPropagation();
    }, true);

    window.onmousewheel = document.onmousewheel = null;
    window.onwheel = null;
    window.touchmove = null;
    window.touchstart = null;
    document.onkeydown = null;
  });
}

Appelez-le dans le composant AppDetails.vue :

<script>
import { preventscroll } from "./../hooks/preventscroll.js";
...

export default {
  ...
  hooks() {
    preventscroll();
  }
}
</script>

Summary

Résumé original

Vue Hooks peut déjà être utilisé avec Vue 2.x, mais il est encore au stade expérimental. Nous prévoyons d'intégrer Hooks dans Vue 3, mais ce sera toujours différent de React Hooks

• Résumé de cet article

Hooks a été appliqué à Vue3, c'est-à-dire la configuration, mais il a des différences ; de React's Hooks ; lecture recommandée : Quels sont les avantages de Vue3 ? (Comparaison détaillée avec React Hook)
• Adresse https://zhuanlan.zhihu.com/p/133819602

En fait, je comprends son intention de conception même si vous n'utilisez pas le framework d'appel d'origine et utilisez JS de manière native. , vous pouvez toujours Créons une logique de réutilisation similaire. Encapsulez la logique qui implémente une fonction complète dans une fonction. Regardez simplement le nom de la fonction et vous saurez ce qu'elle fait. Vous n'avez pas besoin de connaître son implémentation interne. Si vous voulez savoir, accédez aux hooks correspondants pour la trouver. Au moins, c'est ça. De manière générale, cela est cohérent avec l'idée de conception de programmation fonctionnelle

Le corps principal de cet article est traduit de : what-hooks-mean-for-vue (https://css-) tricks.com/what-hooks-mean-for -vue/)

Auteur : Sarah Drasner

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !

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!