Erfahren Sie mehr über Hooks in Vue und sprechen Sie über ihre Bedeutung für Vue!

Was bedeuten Hooks für Vue? Dieser Artikel wird Ihnen helfen, Hooks in Vue zu verstehen und über seine Bedeutung für Vue zu sprechen. Ich hoffe, er wird für alle hilfreich sein!

Die Hooks, über die wir in diesem Artikel sprechen werden, unterscheiden sich von den Lifecycle Hooks (Lebenszyklus-Hooks), die in Version 16.7.0-alpha in React eingeführt wurden. Obwohl Hooks von React vorgeschlagen wurden, ist ihr Kern darin Dieser wichtige Codekombinationsmechanismus ist für das gesamte JavaScript-Frameworksystem von großem Nutzen. Nehmen Sie sich heute einen Moment Zeit, um ausführlich darüber zu sprechen: Was bedeuten Hooks für Vue?

Hooks bieten eine klarere Möglichkeit, Code zu organisieren, sodass Code wiederverwendet werden kann, und was noch wichtiger ist, sie ermöglichen die Kommunikation und Zusammenarbeit verschiedener logischer Teile. [Verwandte Empfehlungen: vue.js Video-Tutorial]

Problemhintergrund

Warum werden Hooks ausgelöst? Was React betrifft, ist der ursprüngliche Hintergrund des Problems folgender:

Wenn es darum geht, den Begriff des Staates auszudrücken, sind Klassen die häufigste Organisationsform. Die Klasse selbst weist einige Probleme auf, z. B. lange und komplizierte Bindungsbeziehungen, die das Lesen erschweren, und die Richtung, in der dies geschieht, verwirrt die Menschen immer -Ordnungskomponentenklassen sind sehr schwierig, aber es ist leicht, in die „Pyramide des Untergangs“ (Pyramid of Doom) zu geraten, die als übermäßige Verschachtelungsbeziehungen verstanden werden kann Erlauben Sie uns, Funktionsaufrufe zu verwenden, um den Zustand der Komponentenlogik zu definieren. Diese Funktionen sind gleichzeitig besser zusammensetzbar und wiederverwendbar. Der Zustandszugriff und die Wartung können weiterhin durchgeführt werden

Abbildung ①

Abbildung ②

• Es gibt eine Transformation von Abbildung ① zu Abbildung ②, der Komponentencode wird neu kombiniert und dann in Form von Funktionen zur externen Wiederverwendung exportiert Was die Wartung betrifft, bietet Hooks eine einzige, funktionale Möglichkeit, gemeinsam genutzte Logik zu handhaben und möglicherweise die Codegröße zu reduzieren.

Vue Hooks

• Warum verwenden wir Hooks in Vue? Schließlich gibt es in Vue keine häufig verwendeten Klassen. In Vue verwenden wir Mixins, um die gleiche Wiederverwendungslogik von Komponenten zu lösen. Können Hooks das Problem lösen?

Es gibt zwei Hauptprobleme:

Mixins können den Status nicht übertragen;

Hooks können diese beiden Punkte gut lösen; Beispiel:

Übergabestatus

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
              }
            }
          },
          ...

Übergabe von Werten zwischen zwei Hooks:

• <script>
  import { logolettering } from "./../hooks/logolettering.js";
  import { windowwidth } from "./../hooks/windowwidth.js";
  
  export default {
    hooks() {
      logolettering(windowwidth());
    }
  };
  </script>

  Wir können die Hooks-Kombinationslogik in der gesamten Anwendung verwenden;

Quelle löschen

In den Ordner src/hooks , wird ein Hooks zur Implementierung erstellt: Wenn das Dialogfeld zum Anzeigen des Inhalts geöffnet wird, wird die Seite angehalten, und nach dem Anzeigen des Dialogfelds kann die Seite erneut gescrollt werden.

Es wird wahrscheinlich mehrfach in der Anwendung verwendet;

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

Rufen Sie es in der AppDetails.vue-Komponente auf:

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

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

Zusammenfassung

• Originalzusammenfassung

Vue Hooks können bereits mit Vue 2.x verwendet werden. befindet sich aber noch im experimentellen Stadium. Wir planen, Hooks in Vue 3 zu integrieren, aber es wird sich immer noch von React Hooks unterscheiden.

Zusammenfassung dieses Artikels

Hooks wurde auf Vue3 angewendet, d von React's Hooks; empfohlene Lektüre: Was sind die Vorteile von Vue3? (Detaillierter Vergleich mit React Hook)

Adresse https://zhuanlan.zhihu.com/p/133819602

Tatsächlich verstehe ich die Designabsicht, auch wenn Sie nicht das ursprüngliche Aufrufframework verwenden und JS nativ verwenden , Sie können immer noch eine ähnliche Wiederverwendungslogik erstellen. Kapseln Sie die Logik, die eine vollständige Funktion implementiert, in eine Funktion, und Sie werden wissen, was sie tut. Wenn Sie es wissen möchten, gehen Sie zu den entsprechenden Hooks Es ist zumindest in gewisser Weise im Einklang mit den Ideen des funktionalen Programmierdesigns.

tricks.com/what-hooks-mean-for -vue/)

• Autorin: Sarah Drasner

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Hooks in Vue und sprechen Sie über ihre Bedeutung für Vue!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!