快捷導(dǎo)航

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

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

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

vue3 中的 hooks 是什么?

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

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

在 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,最后返回一個響應(yīng)式的 a,我們在組件中引用一下

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

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

當(dāng)然這只是個簡單的例子,后面會詳細(xì)介紹一個 hooks 實(shí)際應(yīng)用的場景

mixin 與 hooks

我們都知道 Vue 3 引入 Composition API的寫法,當(dāng)我們引入一個 hooks 函數(shù)的時候其實(shí)就像在 vue2 中使用一個 mixin 一樣,hooks 函數(shù)中的ref,reactive就相當(dāng)于 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中的點(diǎn)擊事件");
    },
  },
};

組件中引入

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

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

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

hooks 中生命周期與組件中的生命周期執(zhí)行順序其實(shí)很好判斷,就看它們誰的同級生命周期函數(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 就介紹這些,接下來我們寫兩個實(shí)際應(yīng)用中的 hooks 函數(shù)讓大家體驗(yàn)一下

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

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

<template>
    <div>
        <input type="text" placeholder="請輸入驗(yàn)證碼" 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ā)送驗(yàn)證碼')
const countDownNum = ref(60)
const sendCode = () => {
    //這里省略調(diào)用發(fā)送短信接口邏輯,省略禁止點(diǎn)擊邏輯
    sendBtnText.value = countDownNum.value + 's'
    const timer = setInterval(() => {
        countDownNum.value--
        sendBtnText.value = countDownNum.value + 's'
        if (countDownNum.value === 0) {
            clearInterval(timer)
            sendBtnText.value = '發(fā)送驗(yàn)證碼'
            countDownNum.value = 60
        }
    }, 1000)
}
</script>
<style lang="css">
button {
    font-size: 14px;
    background: #23A7F2;
    color: #fff;
}
input {
    height: 30px;
}
</style>

這里邏輯很簡單,就是點(diǎn)擊發(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ā)送驗(yàn)證碼");
  const countDownNum = ref(downNum);
  //這里省略調(diào)用發(fā)送短信接口邏輯,省略禁止點(diǎn)擊邏輯
  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ā)送驗(yàn)證碼";
        countDownNum.value = 60;
      }
    }, 1000);
  };
  return { sendBtnText, sendCode };
};

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

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

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