Vue中的Hooks有什么作用

本篇內(nèi)容介紹了“Vue中的Hooks有什么作用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

Hooks 對于 Vue 意義著什么？

Hooks 提供了一種更明確的方式來組織代碼，使得代碼能重用，更重要的是，它允許不同的邏輯部分進行通信、協(xié)同工作?！鞠嚓P(guān)推薦：vue.js視頻教程】

問題背景

Hooks 為什么被提出？就 React 而言，最初的問題背景是這樣的：

在表達狀態(tài)概念時，類 是最常見的組織形式。類本身存在一些問題，比如綁定關(guān)系冗長、復(fù)雜，導(dǎo)致不易讀，This 的指向總會讓人摸不清頭腦；

不僅如此，在重用方面，使用渲染工具或高階組件類的模式很常見，但這樣容易陷入 “pyramid of doom” （末日金字塔），可以將它理解為過度的嵌套關(guān)系；

Hooks 就是來解決這些問題的；Hooks 允許我們使用函數(shù)調(diào)用來定義組件的狀態(tài)邏輯，這些函數(shù)有更強的組合性、重用性；同時，仍然可以進行狀態(tài)的訪問和維護；

示例：@dan_abramov's code from #ReactConf2018

• 圖①

• 圖②

有圖①到圖②的轉(zhuǎn)變，對組件代碼進行了再次組合，然后以函數(shù)的的方式進行導(dǎo)出，供外部重用；

在維護方面，Hooks 提供了一種單一的、功能性的方式來處理共享邏輯，并有可能減少代碼量。

Vue Hooks

那 Vue 中為什么要用 Hooks 呢？畢竟 Vue 中沒有很頻繁的使用類；在 Vue 中我們使用 mixin 來解決組件相同的重用邏輯；

mixin 的問題在哪？Hooks 能解決嗎？

問題主要有兩點：

• mixin 之間不能傳遞狀態(tài)；

• 邏輯來源并沒有清晰的說明；

而這兩點，Hooks 能很好地解決；

舉個例子：

傳遞狀態(tài)

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

兩個鉤子之間傳值：

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

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

我們可以在整個應(yīng)用程序中使用 Hooks 組合邏輯；

來源清晰

在 src/hooks 文件夾中，創(chuàng)建了一個 Hooks，用于實現(xiàn)：打開對話框查看內(nèi)容時，暫停頁面，并在查看完對話框后，允許再次滾動。

它很有可能在應(yīng)用程序中被多次使用；

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 組件中調(diào)用它：

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

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

“Vue中的Hooks有什么作用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！