Vue
Vue 3 应用开发调试与审查专家
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vue。 它的用途是：Vue 3 应用开发调试与审查专家 完整的 Skill 内容见：https://321skill.com/skills/vue-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我使用 reactive 创建了一个对象，解构赋值后视图不再更新，代码片段如下：...'，它会分析引用丢失原理，建议改用 toRefs 或保持引用，并给出修改后的代码。当你遇到 'Maximum recursive updates exceeded' 错误时，AI 会检查 watcher 中的副作用，提供防抖或条件判断的修复方案，避免无限循环。
介绍
解决 Vue 3 开发中常见的响应式陷阱、组件同步异常、路由状态脱节、Pinia 初始化失败等问题。当 UI 不随状态更新、reactive 对象解构后失效、watcher 陷入死循环、模板 ref 为 null、SSR 客户端不匹配、路由参数变化但组件不刷新、控制台报错组件未找到或非 props 属性、页面因未捕获错误白屏，以及长列表或大对象引起输入卡顿时，本技能提供精准的诊断和修复方案。
使用方法：直接向 AI 描述你遇到的具体症状或代码片段，它会分析根因并给出修改建议。例如，说出“我的 reactive 对象解构后视图不更新”，AI 将解释引用丢失原理并提供 toRefs 或保持引用的解决方案。同时支持对现有代码进行审查，识别潜在的性能问题和错误模式。
适合人群：Vue 3 开发者，尤其是从 Vue 2 Options API 迁移到 Composition API 的团队，以及需要处理复杂响应式状态、跨组件通信、Pinia 状态管理、Vue Router 动态路由的开发者。也适合负责代码审查的前端技术负责人。
使用建议：将本技能与具体的代码片段或错误信息结合使用效果最佳。注意它不处理 Nuxt 特有的 SSR 路由和数据获取、Vite 构建配置问题，以及 React 或 Svelte 相关场景。对于大型项目，建议先隔离最小复现再提问。
核心特点
不仅覆盖 Vue 3 核心 API，还专门针对响应式丢失、watcher 循环、Pinia 初始化、hydration mismatch 等高频痛点提供诊断，并包含从 Vue 2 Options API 到 Composition API 的迁移专项支持，这是通用 Vue 文档或普通 AI 提示难以做到的。
注意事项
不适用于 Nuxt 特有的 SSR 路由和数据获取、Vite 构建配置，以及 React 或 Svelte 相关场景。
常见问题
ref 和 reactive 有什么区别？什么时候用哪个？
ref 用于基本类型和需要显式追踪的对象（通过 .value 访问），reactive 用于深层响应式对象（直接访问属性）。推荐优先用 ref 保持一致性，组合函数中返回 ref 可避免解构丢失响应。
Pinia 报错 'getActivePinia() was called but there was no active Pinia' 怎么解决？
确保在 main.js 中正确调用 app.use(createPinia())，并且 store 的使用在组件 setup 内或组件外通过 getActivePinia 获取实例。常见原因是在组件外使用 store 时未传入 pinia 实例。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vue-x-7/raw/index.md 读取 Vue 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vue-x-7/raw/index.md（查看排版版本）