Lassen Sie uns darüber sprechen, was Hooks für Vue bedeutet

Dieser Artikel vermittelt Ihnen relevantes Wissen über Hooks und Vue. Hooks wurden in der Alpha-Version 16.7.0 eingeführt und bieten hauptsächlich eine klarere Vorstellung von der Wiederverwendung von Mustern.

Verwechseln Sie Hooks nicht mit den Lifecycle-Hooks von Vue. Hooks wurden von React in der Alpha-Version V16.7.0 eingeführt, und Vue veröffentlichte einige Tage später seine Proof-of-Concept-Version. Obwohl Hooks von React eingeführt wurden, sind sie ein wertvoller und wichtiger Kompositionsmechanismus für jedes JavaScript-Framework-Ökosystem, daher werden wir heute ein wenig Zeit damit verbringen, zu diskutieren, was Hooks bedeuten.

Hooks bieten vor allem eine klarere Idee für die Wiederverwendung von Mustern – sie vermeiden das Umschreiben der Komponente selbst und ermöglichen die nahtlose Zusammenarbeit verschiedener Teile der Zustandslogik.

Ursprüngliche Frage

Was React betrifft, ist das Problem folgendes: Klassen sind die häufigste Form von Komponenten, wenn es darum geht, das Konzept des Zustands auszudrücken. Auch zustandslose Funktionskomponenten erfreuen sich großer Beliebtheit, da sie jedoch nur rein gerendert werden können, ist ihr Einsatz auf Präsentationsaufgaben beschränkt.

Es gibt einige Probleme mit dem Unterricht selbst. Da React beispielsweise immer beliebter wird, ist das Thema Klassen zu einem häufigen Stolperstein für Neulinge geworden. Um React zu verstehen, müssen Entwickler auch Klassen verstehen. Durch die Bindung wird der Code ausführlicher und weniger lesbar und erfordert das Verständnis von this in JavaScript. Einige der Optimierungshindernisse, die durch die Verwendung von Klassen entstehen, werden hier ebenfalls besprochen. this。这里还讨论了使用类所带来的一些优化障碍。

在逻辑复用方面，我们通常使用 render props 和高阶组件等模式。但使用这些模式后会发现自己处于类似的“厄运金字塔”中 —— 样式实现地狱，即过度使用嵌套可能会导致组件难以维护。这导致我想对 Dan Abramov 像喝醉了一样大吼大叫，没有人想要那样。

Hooks 允许我们使用函数调用来定义组件的有状态逻辑，从而解决这些问题。这些函数调用变得更具有组合性、可复用性，并且允许我们在使用函数式组件的同时能够访问和维护状态。React 发布 Hooks 时，人们很兴奋 —— 下面你可以看到 Hooks 展示的一些优势，关于它们如何减少代码和重复：

在维护方面，简单性是关键，Hooks 提供了一种单一的、函数式的方式来实现逻辑共享，并且可能代码量更小。

为什么 Vue 中需要 Hooks？

读到这里你肯定想知道 Hooks 在 Vue 中必须提供什么。这似乎是一个不需要解决的问题。毕竟，类并不是 Vue 主要使用的模式。Vue 提供无状态函数式组件（如果需要它们），但为什么我们需要在函数式组件中携带状态呢？我们有 mixins 用于组合可以在多个组件复用的相同逻辑。问题解决了。

我想到了同样的事情，但在与 Evan You 交谈后，他指出了我忽略的一个主要用例：mixins 不能相互消费和使用状态，但 Hooks 可以。这意味着如果我们需要链式封装逻辑，可以使用 Hooks。

Hooks 实现了 mixins 的功能，但避免了 mixins 带来的两个主要问题：

• 允许相互传递状态。
• 明确指出逻辑来自哪里。

如果使用多个 mixins，我们不清楚哪个属性是由哪个 mixins 提供的。使用 Hooks，函数的返回值会记录消费的值。

那么，这在 Vue 中如何运行呢？我们之前提到过，在使用 Hooks 时，逻辑在函数调用时表达从而可复用。在 Vue 中，这意味着我们可以将数据调用、方法调用或计算属性调用封装到另一个自定义函数中，并使它们可以自由组合。数据、方法和计算属性现在可用于函数式组件了。

例子

让我们来看一个非常简单的 hook，以便我们在继续学习 Hooks 中的组合例子之前理解构建块。

useWat?

好的，Vue Hooks 和 React Hooks 之间存在交叉部分。使用 use 作为前缀是 React 的约定，所以如果你在 React 中查找 Hooks，你会发现 Hooks 的名称都会像 useState、useEffect 等。更多信息可以查看这里。

在 Evan 的在线 demo 里，你可以看到他在何处访问 useState 和 useEffect 并用于 render 函数。

如果你不熟悉 Vue 中的 render 函数，那么看一看官网文档可能会有所帮助。

但是当我们使用 Vue 风格的 Hooks 时，我们会如何命名呢 —— 你猜对了 —— 比如：useData，useComputed

In Bezug auf die Wiederverwendung von Logik verwenden wir normalerweise Muster wie Render-Requisiten und Komponenten höherer Ordnung. Aber die Verwendung dieser Muster kann dazu führen, dass man sich in einer ähnlichen „Pyramide des Untergangs“ befindet – der Stilimplementierungshölle, in der übermäßiger Einsatz von Verschachtelungen dazu führen kann, dass Komponenten schwer zu warten sind. Das führt dazu, dass ich Dan Abramov am liebsten anschreien würde, als wäre er betrunken, und das will niemand.

Hooks lösen diese Probleme, indem sie es uns ermöglichen, mithilfe von Funktionsaufrufen zustandsbehaftete Logik für Komponenten zu definieren. Diese Funktionsaufrufe werden besser zusammensetzbar und wiederverwendbar und ermöglichen uns den Zugriff und die Aufrechterhaltung des Zustands bei Verwendung funktionaler Komponenten. Als React Hooks veröffentlichte, waren die Leute begeistert – unten sehen Sie einige der Vorteile von Hooks im Hinblick darauf, wie sie Code und Duplizierung reduzieren: 🎜🎜Einfachheit ist der Schlüssel, wenn es um die Wartung geht, und Hooks bieten eine einzige, funktionale Möglichkeit dazu Um eine gemeinsame Nutzung der Logik zu erreichen, kann die Codegröße kleiner sein. 🎜🎜Warum werden Hooks in Vue benötigt? 🎜🎜Wenn Sie dies lesen, fragen Sie sich bestimmt, was Hooks in Vue zu bieten haben. Dies scheint ein Problem zu sein, das nicht gelöst werden muss. Schließlich sind Klassen nicht das primäre Muster, das Vue verwendet. Vue stellt bei Bedarf zustandslose Funktionskomponenten bereit, aber warum müssen wir den Zustand in Funktionskomponenten übertragen? Wir haben Mixins zum Kombinieren derselben Logik, die über mehrere Komponenten hinweg wiederverwendet werden kann. Problem gelöst. 🎜🎜Ich habe über das Gleiche nachgedacht, aber nachdem ich mit Evan You gesprochen hatte, wies er auf einen wichtigen Anwendungsfall hin, den ich übersehen habe: Mixins können den Zustand nicht voneinander konsumieren und nutzen, Hooks jedoch schon. Das bedeutet, dass wir Hooks verwenden können, wenn wir gekapselte Logik verketten müssen. 🎜🎜Hooks implementieren die Funktionalität von Mixins, vermeiden jedoch die beiden Hauptprobleme, die durch Mixins verursacht werden: 🎜

• Ermöglichen die gegenseitige Übergabe des Status.
• Machen Sie deutlich, woher die Logik kommt.

🎜Wenn mehrere Mixins verwendet werden, ist nicht klar, welche Eigenschaft von welchen Mixins bereitgestellt wird. Mithilfe von Hooks zeichnet der Rückgabewert der Funktion den verbrauchten Wert auf. 🎜🎜Also, wie funktioniert das in Vue? Wir haben bereits erwähnt, dass bei der Verwendung von Hooks die Logik in Funktionsaufrufen ausgedrückt wird und somit wiederverwendbar ist. In Vue bedeutet das, dass wir einen Datenaufruf, Methodenaufruf oder Aufruf einer berechneten Eigenschaft in eine andere benutzerdefinierte Funktion kapseln und sie frei zusammensetzbar machen können. Daten, Methoden und berechnete Eigenschaften sind jetzt für Funktionskomponenten verfügbar. 🎜🎜Beispiel🎜🎜Schauen wir uns einen sehr einfachen Hook an, um die Bausteine ​​zu verstehen, bevor wir zu den Kompositionsbeispielen in Hooks übergehen. 🎜

useWat?

🎜Okay, es gibt eine Kreuzung zwischen Vue Hooks und React Hooks. Es ist eine Konvention von React, use als Präfix zu verwenden. Wenn Sie also in React nach Hooks suchen, werden Sie feststellen, dass die Namen von Hooks wie folgt lauten: useState, useEffect warten. Weitere Informationen finden Sie hier. 🎜🎜In Evans Online-Demo können Sie sehen, wo er auf useState und useEffect für die Renderfunktion zugreift. 🎜🎜Wenn Sie mit der Renderfunktion in Vue nicht vertraut sind, kann ein Blick in die offizielle Website-Dokumentation hilfreich sein. 🎜🎜Aber wenn wir Hooks im Vue-Stil verwenden, wie werden wir sie dann benennen – Sie haben es erraten – zum Beispiel: useData, useComputed usw. 🎜🎜Damit wir sehen können, wie man Hooks in Vue verwendet, habe ich eine Beispielanwendung erstellt, die wir erkunden können. 🎜

Im Ordner src/hooks habe ich einen Hook erstellt, der das Scrollen wieder ermöglicht useMounted hook 上阻止了滚动，并在 useDestroyed. Dies hilft mir, das Scrollen der Seite anzuhalten, wenn das Dialogfeld zum Anzeigen von Inhalten geöffnet wird, und ermöglicht das erneute Scrollen, wenn das Anzeigedialogfeld endet. Dies ist eine gute Abstraktion, da sie in der gesamten Anwendung mehrmals verwendet werden kann.

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

Dann können wir es in einer Vue-Komponente wie AppDetails.vue aufrufen:

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

Wir können es nicht nur in dieser Komponente verwenden, wir können die gleiche Funktionalität in der gesamten Anwendung verwenden!

Zwei Hooks, die einander verstehen

Wir haben bereits erwähnt, dass einer der Hauptunterschiede zwischen Hooks und Mixins darin besteht, dass Hooks tatsächlich Werte aneinander übergeben können. Schauen wir uns dieses einfache, aber etwas unnatürliche Beispiel an.

In unserer Anwendung müssen wir eine Berechnung in einem wiederverwendbaren Hook durchführen und etwas, das das Ergebnis dieser Berechnung verwenden muss. In unserem Fall haben wir einen Hook, der die Fensterbreite übernimmt und an die Animation weitergibt, sodass diese weiß, dass sie nur ausgelöst wird, wenn wir uns auf einem größeren Bildschirm befinden.

Weitere Informationen finden Sie in der Videodemonstration: css-tricks.com/wp-content/…

Erster Hook:

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

Dann verwenden wir ihn im zweiten Hook, um eine Bedingung zu erstellen, die die Animationslogik auslöst:

// the data comes from the other hookexport 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
            }
          }
        },
        ...

Dann übergeben wir innerhalb der Komponente einen Hook als Parameter an einen anderen Hook:

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

Jetzt können wir Hooks verwenden, um Logik in unserer gesamten Anwendung zu schreiben! Auch dies ist ein unnatürliches Beispiel für Demonstrationszwecke, aber Sie können sehen, wie effektiv dies für große Anwendungen sein kann, indem die Logik in kleineren, wiederverwendbaren Funktionen beibehalten wird

【Verwandte Empfehlungen:《vue.js-Tutorial》】

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, was Hooks für Vue bedeutet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!