为什么 react-grab 可以在 Vue 项目中使用？

这是一个"本想抄作业，结果发现可以直接抄卷子"的故事。

本想造个 Vue 版的轮子

前段时间在 React 项目里用了 react-grab 这个库，体验那是相当丝滑：鼠标指哪打哪，元素信息一键复制，调试样式简直是神器。

正好我维护的有个 Vue 的项目，写 CSS 的时候习惯性想用它，结果突然反应过来："坏了，这玩意儿叫 React Grab，Vue 项目肯定没戏。"

当时我就想，既然用不了，那我就自己模仿它的原理写一个 vue-grab 呗！反正核心逻辑无非就是监听鼠标、获取 DOM 属性这些，应该不难。

于是我撸起袖子，打开它的源码准备"参考参考"（其实就是准备抄作业）。

结果当我扒开代码一看，整个人都愣住了------这货跟 React 不能说完全无关，只能说毫不沾边！

本来准备大干一场造个轮子，结果发现轮子就在脚底下，还是通用的。今天就来聊聊这个有意思的现象。

react-grab 到底干了啥？其实它的逻辑特别简单，总结下来就这一条线：

graph LR A[监听鼠标] --> B[高亮元素] --> C[解析DOM] --> D[复制信息]

仔细看看这四个步骤：

发现没？这一套流程走下来，根本不需要 React 的运行时参与 。它没用 useState，也没用 Virtual DOM，完全就是纯纯的 JavaScript。

口说无凭，咱们看证据。

证据一：看依赖

打开它的 package.json，看看 dependencies：

json 复制代码

{
  "dependencies": {
    // 只有一些工具库，完全没有 react 或 react-dom！
  },
  "peerDependencies": {
    // 这里也没有强制要求 react
  }
}

证据二：看用法

再看它的入口文件，根本不需要什么 <Provider> 包裹，也不用 useGrab 这种 Hook，直接调用个函数就完事了：

csharp 复制代码

// src/main.ts
// 不管你是 Vue、React 还是原生 JS，用法都一样：

import { init } from 'react-grab';

init({
  theme: 'dark',
  color: '#3b82f6',
});

我在 Vue 项目的 main.ts 里试了一下，完美运行。这时候我才意识到：这哪里是 react-grab，这分明是 any-grab 啊！

既然跟 React 没强依赖，作者为啥非得叫 react-grab？我猜大概率是这几个原因：

其实这种"挂羊头卖狗肉"的库还不少。比如 react-hot-toast，其实它也有非 React 的版本；还有很多以 vue- 开头的懒加载库，核心其实就是个 IntersectionObserver，根本不挑框架。

这次经历给我提了个醒：找轮子的时候，千万别被名字限制了想象力。

下次再看到这种带框架前缀的库，别急着划走，按这三步走，只需 30 秒就能看穿它的真面目：

查户口 (看 package.json) 用 npm info <包名> peerDependencies 扫一眼。如果 react 或 vue 是 peerDependencies 甚至完全没有，大概率是通用的。
看门脸 (看初始化代码) 如果文档里让你用 <Provider> 包着，或者必须 app.use()，那是真绑死了。但如果只是 import 一个函数 init() 一下，那它基本就是个原生 JS 库。
看核心 (看它操作什么) 如果是操作 DOM (像拖拽、高亮、截图)、处理数据 (像日期格式化、请求库)，这些天然就是框架无关的。

刚才提到的那个 Vue 项目，其实是我最近开源的 Chat & Edit。

这是一个基于 Vue 3.5 + TypeScript 构建的 AI 辅助写作工具，整合了 Chat 对话与 AI 编辑器双重模式。

除了常规的流式 Markdown 渲染，它最大的特点是工程化实践：

如果你对 AI 应用架构 或者项目内容感兴趣，欢迎来点个 Star ⭐️，一起交流！

这件事让我明白了一个道理：代码不会骗人，但名字会。

很多时候，我们被框架的围墙困住了，觉得 React 的东西 Vue 不能用，Vue 的东西 Angular 不能用。其实跳出来一看，大家底座都是浏览器，都是 DOM，都是 JavaScript。

下次看到好用的工具，哪怕它叫 react-xxx，胆子大一点，扒开源码看看，说不定就能白嫖到你的 Vue 项目里。毕竟，好工具是不分门户的。