Heim > Artikel > Web-Frontend > 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]
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 ①Vue Hooks
Mixins können den Status nicht übertragen;
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 } }
// 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 } } }, ...
<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;
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.
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
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 ArtikelsTatsä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/)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!