快捷導(dǎo)航

Vue3.0中Hook最常出現(xiàn)的使用實(shí)例

更新時(shí)間：2026年05月20日 10:51:58 作者：旺仔牛仔QQ糖

在Vue3的組合式API體系中,自定義Hooks是實(shí)現(xiàn)邏輯復(fù)用的核心機(jī)制,通過將重復(fù)的響應(yīng)式邏輯、副作用管理或狀態(tài)操作封裝為獨(dú)立函數(shù),開發(fā)者可以顯著提升代碼的可維護(hù)性與開發(fā)效率,這篇文章主要介紹了Vue3.0中Hook最常出現(xiàn)的使用實(shí)例,需要的朋友可以參考下

前言

Vue 3 的 Hook（Composition API）相比 Options API 最大的“好用”在于：把“邏輯”從“組件”里解耦出來，變成可復(fù)用、可組合、可測試的獨(dú)立函數(shù)。

下面給出 4 個(gè)在真實(shí)業(yè)務(wù)里最常出現(xiàn)、最能體現(xiàn)“爽點(diǎn)”的實(shí)例，每個(gè)都只有 30 行左右，復(fù)制即可運(yùn)行。

1. 鼠標(biāo)軌跡 —— 任意組件想跟鼠標(biāo)，只需 1 行

// useMouse.ts
import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() {
  const x = ref(0), y = ref(0)
  const move = (e: MouseEvent) => { x.value = e.pageX; y.value = e.pageY }
  onMounted(() => window.addEventListener('mousemove', move))
  onUnmounted(() => window.removeEventListener('mousemove', move))
  return { x, y }
}

<!-- AnyComponent.vue -->
<script setup>
import { useMouse } from '@/hooks/useMouse'
const { x, y } = useMouse()
</script>
<template>鼠標(biāo)實(shí)時(shí)位置 {{ x }}, {{ y }}</template>

爽點(diǎn)：以前要在每個(gè)組件寫 mounted/beforeDestroy + 事件監(jiān)聽，現(xiàn)在 1 行搞定，且任意組件都能復(fù)用。

2. 倒計(jì)時(shí)按鈕 —— 驗(yàn)證碼/發(fā)送短信最常用

// useCountDown.ts
import { ref, watchEffect } from 'vue'
export function useCountDown(start = 60) {
  const count = ref(0)
  const startCount = () => { count.value = start }
  watchEffect(() => {
    if (count.value <= 0) return
    const t = setTimeout(() => { count.value-- }, 1000)
    return () => clearTimeout(t)   // 自動(dòng)清理
  })
  return { count, startCount, disabled: () => count.value > 0 }
}

<script setup>
import { useCountDown } from '@/hooks/useCountDown'
const { count, startCount, disabled } = useCountDown()
</script>
<template>
  <button :disabled="disabled()" @click="startCount">
    {{ count ? `${count}s后重試` : '發(fā)送驗(yàn)證碼' }}
  </button>
</template>

爽點(diǎn)：把“計(jì)時(shí)器+按鈕狀態(tài)”這一坨邏輯徹底抽走，頁面只剩模板語義。

3. 異步表格 —— 分頁/搜索/加載一把梭

// useTable.ts
import { ref, watchEffect } from 'vue'
import axios from 'axios'
export function useTable(api: string) {
  const loading = ref(false), data = ref([]), total = ref(0)
  const page  = ref(1), size = ref(10), search = ref('')
  const refresh = () => {
    loading.value = true
    axios.get(api, { params: { page: page.value, size: size.value, search: search.value }})
         .then((res) => { data.value = res.data.list; total.value = res.data.total })
         .finally(() => { loading.value = false })
  }
  watchEffect(refresh)          // 任意條件變化自動(dòng)重新拉數(shù)據(jù)
  return { loading, data, total, page, size, search, refresh }
}

<script setup>
import { useTable } from '@/hooks/useTable'
const { loading, data, total, page, size, search } = useTable('/api/user')
</script>
<template>
  <input v-model="search" placeholder="回車搜索"/>
  <el-table v-loading="loading" :data="data"> ... </el-table>
  <el-pagination v-model:current-page="page" v-model:page-size="size" :total="total"/>
</template>

爽點(diǎn)：組件里再也看不到 loading/page/search 的膠水代碼，換任何業(yè)務(wù)字段只需改 api 即可。

4. 全局狀態(tài) —— 不用 Pinia 也能輕量級共享

// useGlobalCount.ts
import { ref, computed } from 'vue'
const globalCount = ref(0)
export function useGlobalCount() {
  const double = computed(() => globalCount.value * 2)
  const inc = () => globalCount.value++
  return { count: globalCount, double, inc }
}

<!-- A.vue -->
<script setup>
import { useGlobalCount } from '@/hooks/useGlobalCount'
const { count, double, inc } = useGlobalCount()
</script>
<template>
  <p>{{ count }} / {{ double }}</p>
  <button @click="inc">+1</button>
</template>

爽點(diǎn)：多組件同時(shí)引入 useGlobalCount，數(shù)據(jù)天然同步，不用 provide/inject 也不依賴外部庫。