VueUse 的 useMouse 在 React 里能用吗？

爱学习的银银提问于 2026-02-27 06:03:20 阅读 23

框架

我最近在 React 项目里想用 VueUse 的 useMouse，但发现它好像依赖 Vue 的响应式系统。我试了直接引入，结果报错说找不到 Vue 实例。

是不是根本不能在 React 里用？还是我姿势不对？

import { useMouse } from '@vueuse/core';

function MyComponent() {
  const { x, y } = useMouse(); // 这里直接报错：[Vue warn]: createApp() is not supported in this environment.
  return <div>Mouse at {x}, {y}</div>;
}

Vue生态状态管理

我来解答赞 7 收藏

反馈

1 条解答

UP主～春光 Lv1

不能直接用，VueUse 的 useMouse 确实强依赖 Vue 的响应式系统（比如 ref、reactive、getCurrentInstance 等），在 React 里调会直接报错，因为底层会尝试创建 Vue 实例。

不过别慌，逻辑本身是纯 JS 写的，核心就是监听 mousemove 事件，自己抄个简化版用在 React 里就行，拿去改改：

import { useState, useEffect } from 'react';



function useMouse() {

  const [position, setPosition] = useState({ x: 0, y: 0 });



  useEffect(() => {

    const update = (e) => {

      setPosition({ x: e.clientX, y: e.clientY });

    };



    window.addEventListener('mousemove', update);

    return () => window.removeEventListener('mousemove', update);

  }, []);



  return position;

}



function MyComponent() {

  const { x, y } = useMouse();

  return <div>Mouse at {x}, {y}</div>;

}

如果想要更完整点（比如支持节流、监听其他事件源），可以参考 VueUse 的源码自己移植，但一般这种简单场景够用了。

真想用 VueUse 的话……除非你用 @vueuse/react（它专门适配 React 的），但那也是 VueUse 官方后来才加的，原版 @vueuse/core 别硬塞了，不值得折腾。

2026-02-27 06:09