自定义hooks本质上是一个函数，通常结合Composition API使用。抽离setup函数中可复用逻辑，按需引入和调用来降低代码耦合度。具体做法：

1. 将可复用的代码逻辑抽离成外部ts文件；
2. 函数名/文件名以use开头，比如useDialog；
3. setup函数中解构出响应式变量和方法，比如const { visible } = useDialog(false);

// src/hooks/useMousePosition.ts
import { ref, onMounted, onUnmounted, Ref } from 'vue'

interface MousePosition {
    x: Ref<number>,
    y: Ref<number>
}

function useMousePosition(): MousePosition {
    const x = ref(0)
    const y = ref(0)
    const updateMouse = (e: MouseEvent) => {
        x.value = e.pageX
        y.value = e.pageY
    }
    onMounted(() => {
        document.addEventListener('click', updateMouse)
    })
    onUnmounted(() => {
        document.removeEventListener('click', updateMouse)
    })
    return { x, y }
}

export default useMousePosition

// src/views/test.vue
<template>
  <div>
    <p>X: {{ x }}</p>
    <p>Y: {{ y }}</p>
  </div>
</template>

<script lang="ts" setup>
	import { defineComponent } from 'vue'
	// 引入hooks
	import useMousePosition from '../../hooks/useMousePosition'
	// 采用解构的方法
	const { x, y } = useMousePosition()
</script>

总结

Vue2时代Option Api ，data、methos、watch…分开写，这种是碎片化的分散的，代码一多就容易高耦合，维护时来回切换代码是繁琐的！ Vue3时代出现Composition Api，通过利用各种Hooks和自定义Hooks将碎片化的响应式变量和方法按功能分块写，实现高内聚低耦合。