詳解hooks在vue3中的使用方法及示例

更新時間：2023年09月01日 08:45:56 作者：東方小月

hooks可以通過特定的函數(shù)將邏輯 "鉤入" 組件中,使得開發(fā)者能夠更靈活地構建和管理組件的功能從而提高代碼的可讀性以及可維護性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下

vue3 中的 hooks 是什么?

簡單來說如果你的函數(shù)中用到了諸如 ref,reactive,onMounted 等 vue 提供的 api 的話,那么它就是一個 hooks 函數(shù),如果沒用到它就是一個普通工具函數(shù)。至于它為什么叫 hooks,我的理解則是

它可以通過特定的函數(shù)將邏輯 "鉤入" 組件中，使得開發(fā)者能夠更靈活地構建和管理組件的功能從而提高代碼的可讀性以及可維護性等

在 vue3 中使用

上面說到 hooks 函數(shù)里包含了 vue 提供的 api,下面我們就簡單的來舉個例子看一下 vue3 中的 hooks 函數(shù)。一般來說,如果一個你得函數(shù)為 hooks 函數(shù),那么你需要將其以 use 開頭命名。在 src 下新建一個 hooks 目錄專門存放 hooks 函數(shù),然后寫下第一個非常簡單的 hooks 函數(shù) useAdd

import { ref } from "vue";
export const useAdd = () => {
  const a = ref(1);
  setInterval(() => {
    a.value++;
  }, 1000);
  return a;
};

這是一個非常簡單的 hooks 函數(shù),每隔一秒就讓 a.value 加 1,最后返回一個響應式的 a,我們在組件中引用一下

<template>
  <div>{{ a }}</div>
</template>
<script lang='ts' setup>
import { useAdd } from "../hooks/useAdd"
const a = useAdd()
</script>

此時我們會看到每隔一秒頁面上的值就會加 1,所以說 a 還是保持了它的響應式特性

當然這只是個簡單的例子,后面會詳細介紹一個 hooks 實際應用的場景

mixin 與 hooks

我們都知道 Vue 3 引入 Composition API的寫法,當我們引入一個 hooks 函數(shù)的時候其實就像在 vue2 中使用一個 mixin 一樣,hooks 函數(shù)中的ref,reactive就相當于 mixin 中的data,同時 hooks 還可以引入一些生命周期函數(shù),watch 等在 mixin 中都有體現(xiàn)。下面展示一下 mixin 的寫法,這里不過多的講解 mixin

export const mixins = {
  data() {
    return {
      msg: "",
    };
  },
  computed: {},
  created() {
    console.log("我是mixin中的created生命周期函數(shù)");
  },
  mounted() {
    console.log("我是mixin中的mounted生命周期函數(shù)");
  },
  methods: {
    clickMe() {
      console.log("我是mixin中的點擊事件");
    },
  },
};

組件中引入

export default {
  name: "App",
  mixins: [mixins],
  components: {},
  created() {
    console.log("組件調用minxi數(shù)據(jù)", this.msg);
  },
  mounted() {
    console.log("我是組件的mounted生命周期函數(shù)");
  },
};

用過 vue2 的 mixin 的都知道它雖然可以封裝一些邏輯,但是它同時也帶來了一些問題.比如你引入多個 mixin 它們的 data,methods 命名可能會沖突,當 mixin 多了可能會出現(xiàn)維護性問題,另外 mixin 不是一個函數(shù),因此不能傳遞參數(shù)來改變它的邏輯,具有一定的局限性等,但這些問題到了 vue3 的 hooks 中則迎刃而解

hooks 中生命周期執(zhí)行順序

hooks 中生命周期與組件中的生命周期執(zhí)行順序其實很好判斷,就看它們誰的同級生命周期函數(shù)先創(chuàng)建那就先執(zhí)行誰的,比如在 useAdd 中加幾個生命周期

import { ref, onMounted, onBeforeUnmount, onUnmounted } from "vue";
export const useAdd = () => {
  const a = ref(1);
  setInterval(() => {
    a.value++;
  }, 1000);
  onMounted(() => {
    console.log("hooks---onMounted");
  });
  onBeforeUnmount(() => {
    console.log("hooks---onMounted");
  });
  onUnmounted(() => {
    console.log("hooks---onUnmounted");
  });
  return a;
};

然后在組件中也引入這些生命周期

<template>
  <div>{{ a }}</div>
</template>
<script lang='ts' setup>
import { useAdd } from "../hooks/useTest"
import { onMounted, onBeforeUnmount, onUnmounted } from "vue";
onMounted(() => {
  console.log("組件---onMounted");
});
onBeforeUnmount(() => {
  console.log("組件---onMounted");
});
onUnmounted(() => {
  console.log("組件---onUnmounted");
});
const a = useAdd()
</script>

如果將 hooks 放到最后那么它們的順序是這樣的

如果放到前面那就是這樣的

ok,vue3 的 hooks 就介紹這些,接下來我們寫兩個實際應用中的 hooks 函數(shù)讓大家體驗一下

封裝一個發(fā)送短信驗證碼倒計時 hooks

我們先直接在組件中實現(xiàn)一個發(fā)送短信的功能,注意下面只寫了一些主要邏輯,很多細節(jié)并未處理

<template>
    <div>
        <input type="text" placeholder="請輸入驗證碼" v-model="code">
        <button @click="sendCode">{{ sendBtnText }}</button>
    </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
const code = ref('')
const sendBtnText = ref('發(fā)送驗證碼')
const countDownNum = ref(60)
const sendCode = () => {
    //這里省略調用發(fā)送短信接口邏輯,省略禁止點擊邏輯
    sendBtnText.value = countDownNum.value + 's'
    const timer = setInterval(() => {
        countDownNum.value--
        sendBtnText.value = countDownNum.value + 's'
        if (countDownNum.value === 0) {
            clearInterval(timer)
            sendBtnText.value = '發(fā)送驗證碼'
            countDownNum.value = 60
        }
    }, 1000)
}
</script>
<style lang="css">
button {
    font-size: 14px;
    background: #23A7F2;
    color: #fff;
}
input {
    height: 30px;
}
</style>

這里邏輯很簡單,就是點擊發(fā)送按鈕開啟定時器出現(xiàn)倒計時的功能

假如我們還有其它地方用到發(fā)送短信頁面,我們可以將短信發(fā)送封裝成一個組件。但是如果其它頁面想要使用的發(fā)送短信頁面和這個組件不一樣的話,我們就需要將它的邏輯抽離封裝成一個 hooks 函數(shù)了,下面我們就將這個倒計時功能封裝成一名為 useCountDown 的 hooks

import { Ref, ref } from "vue";
export default (
  downNum: number
): ({ sendBtnText: Ref<string>, sendCode: () => void }) => {
  const sendBtnText = ref("發(fā)送驗證碼");
  const countDownNum = ref(downNum);
  //這里省略調用發(fā)送短信接口邏輯,省略禁止點擊邏輯
  const sendCode = () => {
    sendBtnText.value = countDownNum.value + "s";
    const timer = setInterval(() => {
      countDownNum.value--;
      sendBtnText.value = countDownNum.value + "s";
      if (countDownNum.value === 0) {
        clearInterval(timer);
        sendBtnText.value = "發(fā)送驗證碼";
        countDownNum.value = 60;
      }
    }, 1000);
  };
  return { sendBtnText, sendCode };
};

邏輯和上面一樣,只不過是返回了一個按鈕要顯示的文本以及一個點擊發(fā)送驗證碼調用的函數(shù)。然后在組件中使用

import { ref } from "vue";
import useCountDown from "../hooks/useCountDown";
const code = ref("");
const { sendBtnText, sendCode } = useCountDown(60);

這樣的話在其它組件中就也能夠使用它了