Vue 工具箱（免费版）

概述

Vue 3 的 Composition API 让逻辑组织更灵活，但也带来了一系列新的"隐性陷阱"：响应式丢失、watch 不触发、ref 解包错乱、Provide/Inject 类型不安全等。本工具箱将这些高频问题归纳为可复用的修复模板，让 Agent 在被问及 Vue 3 相关问题时，能够直接给出"错误写法 + 正确写法 + 原因"三段式回答，而不是泛泛而谈。

免费版聚焦于"写得对"——覆盖 8 类核心陷阱与基础组件设计；性能优化、SSR、Pinia 集成等进阶主题留给专业版。

核心能力

核心功能执行

用input_params参数进行配置。

输入: 用户提供核心功能执行所需的指令和必要参数。 处理: 按照skill规范执行核心功能执行操作,遵循单一意图原则。 输出: 返回核心功能执行的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置。

输入: 用户提供参数配置与调用所需的指令和必要参数。 处理: 按照skill规范执行参数配置与调用操作,遵循单一意图原则。 输出: 返回参数配置与调用的执行结果,包含操作状态和输出数据。

• 执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置。

输入: 用户提供结果处理与输出所需的指令和必要参数。 处理: 按照skill规范执行结果处理与输出操作,遵循单一意图原则。 输出: 返回结果处理与输出的执行结果,包含操作状态和输出数据。

• 执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：常见陷阱、时机与组合式、API、优选实践、工具箱、开发者、Composition、下的高频问题、的取舍、的边界、组件设计与路由集、目标是让、Agent、秒内给出可直接复、用的代码片段、避免反复踩坑、when、需要代码生成、编程辅助、调试测试、开发部署时使用、不适用于无明确技、术栈的模糊需求等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景一：组件响应式突然失效

开发者把 reactive 对象整体重新赋值后发现视图不更新。Agent 应识别这是 state = {...} 破坏了响应式代理，建议改用 ref 包裹对象或使用 Object.assign(state, newObj)。

场景二：watch 不触发

用户监听 reactive 对象的深层属性但 watch 不触发。Agent 应提示 watch 默认浅监听，需开启 deep: true 或改为 getter 函数 watch(() => state.nested.value, ...)。

场景三：v-model 类型不匹配

表单组件使用 v-model 时父组件拿到的是 string 而非 number。Agent 应指出 defineModel() 的用法，并提示 modelModifiers 处理类型转换。

快速开始

60 秒上手

1. 把 Vue 3 相关问题抛给 Agent，例如："为什么我的 watch 不触发？"
2. Agent 会按照"陷阱识别 → 错误示例 → 正确示例 → 原因"四步回答
3. 直接复制正确示例到你的

   结果处理: 执行完成后,查看输出结果确认操作状态。成功时输出包含处理摘要和结果数据;失败时根据错误信息排查问题,查阅错误处理章节获取恢复步骤。

   示例

   推荐的

   Props 与 v-model 配置

   优选实践

   1. 响应式选择决策树

   • 基本类型（string/number/boolean）→ ref
   • 对象/数组且不需要整体替换 → reactive
   • 对象/数组且需要整体替换 → ref + .value = newObj
   • 需要解构 → reactive + toRefs

   2. watch 选型

   • 只关心最新值、需要旧值对比 → watch
   • 立即执行、自动追踪依赖 → watchEffect
   • 监听 reactive 深层属性 → watch(getter, cb, { deep: true })

   3. 组件通信分层

   • 父子直传 → Props + Emits
   • 跨层传递 → Provide + Inject（建议用 Symbol key）
   • 全局状态 → Pinia（专业版讲解）

   4. 避免常见反模式

   • 不要在 watch 回调里修改被监听的值（易触发循环）
   • 不要在 computed 里执行副作用
   • 不要在条件分支里调用生命周期钩子
   • 不要给 v-for 用 index 作为 key（除非列表完全静态）

   常见问题

   Q1：为什么 reactive 对象重新赋值后视图不更新？

   A：reactive 返回的是 Proxy 代理对象，整体替换会断开代理。改用 Object.assign(state, newObj) 或将整个对象用 ref 包裹后通过 .value = newObj 替换。

   Q2：解构 reactive 后变量为什么不是响应式的？

   A：解构会把基本类型值拷贝出来，丢失代理引用。使用 toRefs(state) 把每个属性转成 ref，或使用 toRef(state, 'key') 单独转换。

   Q3：watch 监听 reactive 对象的嵌套属性为什么没触发？

   A：watch 默认是浅监听。监听嵌套属性需要：① 开启 deep: true；② 或使用 getter 函数 watch(() => state.nested.value, cb)。

   Q4：computed 里发请求可以吗？

   A：不可以。computed 必须是纯函数，不能有副作用。异步派生数据请用 watchEffect + ref 或 async setup + 。

   Q5：ref 在模板里要不要写 .value？

   A：模板中 ref 会自动解包，直接写变量名即可；在