Vue のフックについてさらに詳しく学び、Vue にとってのフックの重要性について話してください。

Vue にとってフックとは何ですか?この記事では、Vue のフックを理解し、Vue にとってのフックの重要性について説明します。皆様のお役に立てれば幸いです。

この記事で説明するフックは、v16 で React に導入された ライフサイクル フック (ライフサイクル フック) とは異なります。 .7.0-alpha ;Hooks は React によって提案されましたが、その本質は重要なコード結合メカニズムであり、JavaScript フレームワーク システム全体に大きな利益をもたらします。今日は時間をかけて詳しく説明します: Hooks とはVueという意味ですか？

フックは、コードを整理し、コードを再利用可能にするためのより明確な方法を提供し、さらに重要なことに、さまざまな論理部分が通信して連携できるようにします。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

問題の背景

なぜフックが発生したのか? React に関する限り、問題の元々の背景は次のとおりです。

状態の概念を表現する場合、クラスが最も一般的な組織形式です。クラス自体には、長く複雑なバインド関係があり読みにくい、This の方向性が常に人々を混乱させるなど、いくつかの問題があります。

それだけでなく、再利用の観点からは、レンダリング ツールを使用するか、上位コンポーネント クラス パターンは非常に一般的ですが、過剰な入れ子関係として理解できる「pyramid of doom」 (破滅のピラミッド) に陥りやすいです。 #フックはこれらの問題を解決するためにあります。フックを使用すると、関数呼び出しを使用してコンポーネントの状態ロジックを定義できます。これらの関数は、より構成可能で再利用可能です。同時に、状態へのアクセスとメンテナンスも引き続き実行できます。

例: #ReactConf2018 の

@dan_abramov のコード

写真①

写真②

図①から図②への遷移があり、コンポーネント コードが再結合され、外部再利用のために関数としてエクスポートされます。メンテナンスの観点から、フック コード サイズを削減できる可能性のある共有ロジックを処理するための単一の機能的な方法を提供します。

Vue フック

なぜ Vue でフックを使用するのでしょうか?結局のところ、Vue には頻繁に使用されるクラスはありません。Vue では、コンポーネントの同じ再利用ロジックを解決するためにミックスインを使用します。

ミックスインの問題は何ですか?フックで解決できるでしょうか？

主な問題は 2 つあります:

mixins は状態を転送できません;

• 論理ソースの明確な説明がありません;

• #フックはこれら 2 つの点をうまく解決できます;
  例:

転送ステータス

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

2 つのフック間で値を渡す:

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

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

アプリケーションのフックの組み合わせロジック全体で使用できます。
• ##ソースのクリア

#src/hooks フォルダー内に、ダイアログ ボックスを開いてコンテンツを表示するときにページを一時停止し、再度スクロールできるようにするためのフックが作成されます。ダイアログボックスを表示した後。

これはアプリケーション内で複数回使用される可能性があります;

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

AppDetails.vue コンポーネントで呼び出します:

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

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

summary

#原文の要約

Vue フックはすでに Vue 2.x で使用できますが、まだ実験段階です。フックを Vue 3 に統合する予定ですが、それでも React フックとは異なります;

この記事の概要

• フックは Vue3 に適用されましたつまり、セットアップに関するものですが、React のフックとはいくつかの違いがあります。「Vue3 の利点は何ですか?」を読むことをお勧めします。 (React Hook との詳細な比較)

アドレス https://zhuanlan.zhihu.com/p/133819602

• 実際のところ、設計意図は理解できません。オリジナル フレームワークを流用してJSをネイティブに利用することで同様の再利用ロジックを作成できます。完全な関数を実装するロジックを関数にカプセル化します。関数名を見るだけで、その機能がわかります。内部実装を知る必要はありません。知りたい場合は、対応するフックに移動して見つけてください。それ。少なくともこれです。ある意味では、これは関数型プログラミングの設計思想と一致しています。

この記事の本文は、what-hooks-mean-for-vue ( https://css-tricks.com/what -hooks-mean-for-vue/)

著者: Sarah Drasner

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がVue のフックについてさらに詳しく学び、Vue にとってのフックの重要性について話してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。