Vue3.0中Hook最常出现的使用实例

// 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>鼠标实时位置 {{ x }}, {{ y }}</template>

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

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

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

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

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