vue3【详解】选项式 API 实现逻辑复用

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

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

在这里插入图片描述
逻辑封装 useMousePosition.js

// 导入 ref, onMounted, onUnmounted
import { ref, onMounted, onUnmounted } from "vue";

function useMousePosition() {
  // 声明响应式变量 x,y
  let x = ref(0);
  let y = ref(0);

  function update(e) {
    // 事件的 pageX 即 x 坐标
    x.value = e.pageX;
    // 事件的 pageY 即 x 坐标
    y.value = e.pageY;
  }

  onMounted(() => {
    // 实例挂载完成时，添加对鼠标移动事件的监听 mousemove
    window.addEventListener("mousemove", update);
  });

  onUnmounted(() => {
    // 实例卸载完成时，移除对鼠标移动事件的监听 mousemove
    window.removeEventListener("mousemove", update);
  });

  // 返回 x,y
  return {
    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>