Vue3.0 Hook 使用好用多多

Vue 3 的 Hook（Composition API）相比 Options API 最大的"好用"在于：把"逻辑"从"组件"里解耦出来，变成可复用、可组合、可测试的独立函数 。

下面给出 4 个在真实业务里最常出现、最能体现"爽点"的实例，每个都只有 30 行左右，复制即可运行。

1. 鼠标轨迹 ------ 任意组件想跟鼠标，只需 1 行

ts 复制代码

// 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 }
}

vue 复制代码

<!-- AnyComponent.vue -->
<script setup>
import { useMouse } from '@/hooks/useMouse'
const { x, y } = useMouse()
</script>
<template>鼠标实时位置 {{ x }}, {{ y }}</template>

爽点：以前要在每个组件写 mounted/beforeDestroy + 事件监听，现在 1 行搞定，且任意组件都能复用。

2. 倒计时按钮 ------ 验证码/发送短信最常用

ts 复制代码

// 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)   // 自动清理
  })
  return { count, startCount, disabled: () => count.value > 0 }
}

vue 复制代码

<script setup>
import { useCountDown } from '@/hooks/useCountDown'
const { count, startCount, disabled } = useCountDown()
</script>
<template>
  <button :disabled="disabled()" @click="startCount">
    {{ count ? `${count}s后重试` : '发送验证码' }}
  </button>
</template>

爽点：把"计时器+按钮状态"这一坨逻辑彻底抽走，页面只剩模板语义。

3. 异步表格 ------ 分页/搜索/加载一把梭

ts 复制代码

// 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)          // 任意条件变化自动重新拉数据
  return { loading, data, total, page, size, search, refresh }
}

vue 复制代码

<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>

爽点：组件里再也看不到 loading/page/search 的胶水代码，换任何业务字段只需改 api 即可。

4. 全局状态 ------ 不用 Pinia 也能轻量级共享

ts 复制代码

// 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 }
}

vue 复制代码

<!-- 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>

爽点：多组件同时引入 useGlobalCount，数据天然同步，不用 provide/inject 也不依赖外部库。

一句话总结

Options API 是"把逻辑写在组件里"，Hook 是"把逻辑写成函数再插到组件里"。

上面 4 个例子覆盖了事件、计时、异步、状态 四大高频场景，基本能覆盖 80 % 的日常需求；写完一次，后续任意组件 import 即可，真正做到"写好即用、用坏不改"。