vue3 hooks

// Vue 3 Hooks 示例代码

// 引入 Vue 和 Composition API
import { ref, onMounted, onUnmounted } from 'vue';

// 定义一个自定义 hook 函数
function useMousePosition() {
  // 使用 ref 创建响应式数据
  const x = ref(0);
  const y = ref(0);

  // 定义更新鼠标位置的函数
  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  // 在组件挂载时添加事件监听器
  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  // 在组件卸载时移除事件监听器
  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  // 返回响应式数据
  return { x, y };
}

// 使用自定义 hook 的组件示例
export default {
  setup() {
    // 调用自定义 hook 函数
    const { x, y } = useMousePosition();

    // 返回要暴露给模板的数据
    return {
      x,
      y
    };
  }
}

解释说明：

1. 引入 Vue 和 Composition API：

   • ref：用于创建响应式数据。
   • onMounted 和 onUnmounted：生命周期钩子，分别在组件挂载和卸载时执行。

2. 定义自定义 hook 函数 useMousePosition：

   • 创建两个 ref 变量 x 和 y 来存储鼠标的 X 和 Y 坐标。
   • 定义 update 函数来更新这些坐标。
   • 使用 onMounted 添加 mousemove 事件监听器，使用 onUnmounted 移除它，以确保不会产生内存泄漏。
   • 返回 x 和 y 作为响应式数据。

3. 使用自定义 hook 的组件：

   • 在 setup 函数中调用 useMousePosition，并将返回的 x 和 y 暴露给模板。