写个hook函数去追踪鼠标位置：

没用hook前：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'const x = ref(0)
const y = ref(0)function update(event) {x.value = event.pageXy.value = event.pageY
}onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script><template>Mouse position is at: {{ x }}, {{ y }}</template>

用hook后：

//主页面：<template>Mouse position is at: {{ x }}, {{ y }}</template><script setup>
import { useMouse } from './mouse.js'const { x, y } = useMouse()
</script>

在同一目录下新建mouse.js文件，在文件内写入以下内容：

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'// 按照惯例，组合式函数名以“use”开头
export function useMouse() {// 被组合式函数封装和管理的状态const x = ref(0)const y = ref(0)// 组合式函数可以随时更改其状态。function update(event) {x.value = event.pageXy.value = event.pageY}// 一个组合式函数也可以挂靠在所属组件的生命周期上// 来启动和卸载副作用onMounted(() => window.addEventListener('mousemove', update))onUnmounted(() => window.removeEventListener('mousemove', update))// 通过返回值暴露所管理的状态return { x, y }
}