1. 抽离逻辑代码到一个函数
2. 函数命名约定为 useXxxx格式 ( React Hooks 也是 )
3. 在 setup 中引用 useXxx 函数

演示代码：实时获取鼠标的坐标

逻辑封装 useMousePosition.js

// 导入 ref, onMounted, onUnmounted
import { ref, onMounted, onUnmounted } from "vue";function useMousePosition() {// 声明响应式变量 x,ylet x = ref(0);let y = ref(0);function update(e) {// 事件的 pageX 即 x 坐标x.value = e.pageX;// 事件的 pageY 即 x 坐标y.value = e.pageY;}onMounted(() => {// 实例挂载完成时，添加对鼠标移动事件的监听 mousemovewindow.addEventListener("mousemove", update);});onUnmounted(() => {// 实例卸载完成时，移除对鼠标移动事件的监听 mousemovewindow.removeEventListener("mousemove", update);});// 返回 x,yreturn {x,y,};
}// 默认导出函数 useMousePosition
export default useMousePosition;

页面使用 index.vue

<script setup>
import useMousePosition from "./useMousePosition";let { x, y } = useMousePosition();
</script><template><p>鼠标 x 坐标： {{ x }}</p><p>鼠标 y 坐标： {{ y }}</p>
</template>