VueUse 迎来重大更新！Anthony Fu 正式交棒，V15 杀入 AI！

大家好，我是 xy。

前端老牌工具库 VueUse，迎来了一个很有分量的大版本更新。

VueUse v15.0.0 正式发布。

这次除了新增 useWebMCP、useLiveAnnouncer、useTemporalNow，还带来了更好的 Tree Shaking、大量 Bug 修复，以及多项 Breaking Changes。

但真正让我注意到这次更新的，是 Anthony Fu 发的一条动态。

在转发 VueUse v15 时专门强调：

❝

这是 VueUse 团队领导的第一个重大版本！

同时还点名感谢了 Orbis、ilyaliao、43081j、serkodev、vida_0905 等团队成员。

所以标题里说的“交棒”，更准确地讲，是 VueUse 的重大版本推进开始进一步交给团队主导。

Anthony 并没有宣布退出 VueUse，但对于这个长期和他强绑定的项目来说，这依然是一个非常明显的节点。

更巧的是，团队主导的第一个 Major Version，直接加入了一个非常有时代感的新能力：

useWebMCP。

VueUse，开始给 AI Agent 铺路了。

先重新认识一下 VueUse

如果你写过一段时间 Vue 3，大概率已经用过 VueUse。

它的定位很简单：

Vue Composition API 工具合集。

目前 VueUse 已经提供 200+ Functions，覆盖状态、DOM、浏览器 API、传感器、网络、动画、响应式、时间等大量开发场景，同时支持 Tree Shaking、TypeScript 和 SSR。

比如我们平时非常熟悉的：

useMouse、useDark、useClipboard、useLocalStorage、useEventListener、useFetch、useWebSocket、useIntersectionObserver。

很多原本需要自己监听事件、管理生命周期、清理副作用的代码，VueUse 都帮你封装成了符合 Vue 响应式习惯的 Composable。

比如获取鼠标坐标：

import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()

就这么简单。

对于很多 Vue 开发者来说，VueUse 早就已经不只是一个普通工具库，更像是 Vue Composition API 的“标准扩展包”。

VueUse 背后的 Anthony Fu

说 VueUse，自然绕不开 Anthony Fu，也就是 antfu。

如果你关注前端开源，这个名字应该非常熟悉。

Anthony 创建了 VueUse、Vitest、UnoCSS、Slidev 等项目，同时也是 Vue、Nuxt、Vite Core Team 成员，长期活跃在前端工程化、开发者体验和开源生态中。

这些年很多热门项目背后，都能看到他的身影：

Vue、Vite、Nuxt、Vitest、UnoCSS、Shiki、ESLint Stylistic……

而 VueUse，则是 Anthony 很早就开始长期维护的项目之一。

随着项目规模越来越大，VueUse 也早已经从一个个人开源项目，逐渐成长为团队共同维护的 Vue 基础设施。

到了 v15，Anthony 又明确强调：

这是第一个由 VueUse Team 主导的 Major Version。

所以 v15 的意义，已经不只是增加几个 API，VueUse 的维护模式也开始进入一个新的阶段。

v15 最大亮点：useWebMCP

这次 v15 新增了三个比较重要的 Composable：

• useWebMCP
• useLiveAnnouncer
• useTemporalNow

但如果只挑一个最值得聊的，我肯定选：

useWebMCP。

因为它背后连接的，是最近非常火的 WebMCP。

而且前段时间 Chrome 也已经亲自下场了，不知道有多少同学已经折腾过。

WebMCP 到底是什么？

现在很多 AI Agent 已经可以帮我们操作网页。

但目前主流的操作方式，依然很像一个“能看懂网页的机器人”。

比如你让 Agent 帮你订机票，它可能会经历这样一套流程：

读取页面 → 找输入框 → 填城市 → 找日期 → 点击搜索 → 分析结果 → 再点击购买

背后通常会依赖截图、DOM、Accessibility Tree 等页面信息。

这种方式能跑，但天然存在一个问题：

太依赖页面结构。

按钮换个位置、DOM 改一下、交互逻辑调整一下，Agent 都可能重新“迷路”。

而 WebMCP 想解决的，就是这件事情。

它允许网站主动向 AI Agent 暴露一组结构化的 Tool。

比如一个机票网站可以提供：

searchFlights

selectFlight

getBooking

confirmBooking

这样 Agent 不需要满页面寻找“搜索”按钮，也不需要猜某个按钮到底有什么作用。

网站可以直接告诉它：

这里有一个 searchFlights Tool，需要这些参数，你直接调用就行。

于是网页交互开始从：

AI Agent → 理解页面 → 找元素 → 模拟点击

逐渐变成：

AI Agent → 发现 Tool → 传入参数 → 直接执行

对 Agent 来说，这完全是两种体验。

Chrome 已经开始内置 WebMCP

更关键的是，WebMCP 已经开始进入浏览器。

前段时间 Chrome 正式开始推进 WebMCP，不知道有多少同学已经体验过。

Google 先开放了 WebMCP Early Preview，随后又开始通过 Chrome 的 Origin Trial 推进真实网站测试。

本地开发甚至可以开启相关实验 Flag：

chrome://flags/#enable-webmcp-testing

Chrome DevTools 也增加了专门的 WebMCP 调试能力。

开发者可以直接查看：

• 页面注册了哪些 Tool
• 每个 Tool 的 Schema
• Tool 需要哪些参数
• Agent 调用了什么
• Tool 最终返回了什么

当然，WebMCP 目前仍然属于实验阶段的 Web 能力，距离全面稳定普及还有一段距离。

但 Chrome 的态度已经非常明显：

浏览器正在开始为 AI Agent 提供原生接口。

而就在这个时间点，VueUse v15 跟上来了。

VueUse 把 WebMCP 封装成了 useWebMCP

原生使用 WebMCP，需要通过类似下面的浏览器 API 注册 Tool：

document.modelContext.registerTool()

对于 Vue 开发者来说，如果直接处理这些 API，还要考虑组件生命周期、注册、注销、响应式状态等一系列问题。

VueUse v15 直接帮你包成了：

useWebMCP

它的作用很直接：

注册一个 WebMCP Tool，并把 Tool 生命周期绑定到当前 Vue Scope。

比如做一个 Todo List：

import { useWebMCP } from '@vueuse/core'
import { shallowRef } from 'vue'

const todos = shallowRef<string[]>([])

useWebMCP({
  name: 'add-todo',

  description: 'Add a new item to the user\'s active todo list',

  inputSchema: {
    type: 'object',
    properties: {
      text: {
        type: 'string',
      },
    },
    required: ['text'],
  },

  async execute({ text }) {
    todos.value = [...todos.value, text]

    return `Added todo item: "${text}" successfully.`
  },
})

注册完成后，支持 WebMCP 的 Agent 就可以发现：

add-todo

然后直接调用它。

以前 Agent 可能需要先找到输入框、填写内容、再寻找 Add 按钮。

现在可以直接：

调用 add-todo → 传入文本 → 完成操作。

而且 VueUse 已经帮你把 Vue 生命周期接上了。

组件出现，Tool 注册；组件销毁，Tool 自动注销。

name、description、inputSchema、enabled 等配置，还可以直接使用 Vue 的响应式数据。

这就是 useWebMCP 真正有意思的地方。

Chrome 开始给 Agent 铺路，VueUse 紧接着就把这条路接到了 Vue。

而 VueUse 已经提前把这个入口准备好了。

v15 还有两个新 Composable

除了 useWebMCP，VueUse v15 还新增了两个 Composable。

useLiveAnnouncer

这是一个偏无障碍方向的能力。

它可以动态向 Screen Reader 播报页面状态变化，比较适合表单结果、异步任务、Toast、数据加载完成等场景。

useTemporalNow

另一个是：

useTemporalNow

它开始围绕 JavaScript 新一代日期时间 API Temporal 提供响应式时间能力。

所以从新增功能来看，v15 的三个重点非常清晰：

AI Agent、Accessibility、Temporal。

升级 v15，这几个坑要注意

既然是 Major Version，这次当然也清掉了一批历史包袱。

1. Node.js 20 停止支持

首先是：

VueUse v15 不再支持 Node.js 20。

如果公司的老项目还停留在 Node 20，升级之前最好先检查一下 Node 环境。

2. templateRef 被删除

VueUse 正式删除：

templateRef

现在 Vue 本身已经提供了 useTemplateRef，继续维护一套重复能力意义已经不大。

3. Timer API 统一使用 scheduler

Timer 相关 Composable 中已经废弃的旧配置，这次也被正式移除。

后续统一使用：

scheduler

4. useThrottleFn 默认行为变化

还有一个很容易踩坑的地方：

useThrottleFn 的 trailing 默认值，从 false 改成了 true。

这意味着直接升级 v15 后，一些节流函数最后一次调用的行为可能发生变化。

如果项目里大量使用 useThrottleFn，建议升级后重点测试一下。

顺手修了一大批问题

除了新能力，VueUse v15 还集中处理了不少长期问题。

比较值得关注的包括：

• 修复部分函数的 Tree Shaking 标记
• useFetch 避免旧请求结果覆盖新请求
• useWebSocket 忽略已经失效连接发送的消息
• useResizeObserver 避免 Comment Node 导致崩溃
• useBluetooth 修复重复监听和重新挂载问题
• onLongPress 正确处理 pointercancel
• usePointer 在 pointercancel 后正确重置状态
• useIDBKeyval 支持跨 Tab 同步

这些更新没有 WebMCP 那么吸睛，但对于真正在线上使用 VueUse 的项目来说，反而都非常实在。

写在最后

我觉得 VueUse v15 这次挺有意思。

一边是项目本身的变化：Anthony Fu 开始把 Major Version 更进一步交给 VueUse Team 主导。

另一边则是 Web 技术方向正在发生变化：Chrome 开始推进 WebMCP，VueUse 紧接着把 WebMCP 封装进了 Vue。

VueUse 过去一直在做一件事情：把浏览器里那些不好用、难管理的 API，封装成 Vue 开发者熟悉的 Composable。

到了 AI Agent 时代，这套思路依然没变，只不过这次，它封装的是 浏览器与 AI Agent 之间的新接口。

现在的 useWebMCP 可能只是一个很小的 API。

但如果未来 Agent 真正成为浏览器里的常驻能力，那么“给 AI 暴露 Tool”，很可能会像今天“给用户写 UI”一样普遍。

团队接棒后的第一个重大版本，就直接杀进 AI Agent。

VueUse v15，确实值得关注。

• 相关链接：https://github.com/vueuse/vueuse/releases/tag/v15.0.0
• VueUse 官网：https://vueuse.org/
• useWebMCP：https://vueuse.org/core/useWebMCP/
• WebMCP：https://developer.chrome.com/docs/ai/webmcp/