Vue
Vue 3 应用全流程调试与开发助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vue。 它的用途是：Vue 3 应用全流程调试与开发助手 完整的 Skill 内容见：https://321skill.com/skills/vue-x-8/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的Vue 3组件中，一个响应式对象在解构后失去了响应性，数据变了但UI不更新，代码片段如下：const data = reactive({ count: 0 }); const { count } = data;' AI会分析指出解构导致count变为普通值，建议使用toRefs(data)或toRef(data, 'count')，并给出修改后的代码示例。
介绍
解决 Vue 3 开发中常见的响应式丢失、watcher 异常、组件通信失效、SSR 水合不匹配、性能卡顿等问题。当 UI 不随状态更新、解构后响应式丢失、忘记 .value、watcher 不触发或循环报错、props 或 v-model 不同步、模板 ref 为 null、路由参数变化不重载、Pinia 报无活动实例、控制台出现组件未解析或非 props 属性警告、错误导致页面白屏、长列表或大对象导致输入延迟、图表库放入 ref 后失效、scoped 样式不穿透子组件等情况时，可直接使用本 Skill 进行诊断与修复。
使用方法：在对话中描述你遇到的具体 Vue 3 问题，提供相关代码片段（组件、组合式函数、路由、Pinia store 等），AI 会分析问题根因并给出修复方案，包括代码修改示例、最佳实践建议和迁移指南。支持从 Vue 2 Options API 到 Composition API + script setup 的迁移场景。
适合前端开发、全栈开发、测试工程师等需要频繁调试 Vue 3 应用的开发者。尤其适合正在从 Vue 2 迁移、或使用 Pinia + Vue Router 构建中大型项目、或遇到性能瓶颈的团队。
使用建议：提供完整的最小可复现代码片段（包括模板、脚本、样式），并说明期望行为与实际差异。对于复杂性能问题，可提供数据量级和渲染链路。注意本 Skill 不处理 Nuxt 特定问题（如 SSR 数据获取、路由中间件）、Vite 构建配置、React 或 Svelte 相关代码。
核心特点
与通用 Vue 技能不同，本 Skill 专门覆盖 Vue 3 的 20+ 种常见陷阱和迁移场景，包括响应式系统深度调试、Pinia 状态管理异常、Vue Router 参数变化不重载、scoped 样式穿透等，并提供从 Options API 到 Composition API 的迁移代码转换。
注意事项
不适用于 Nuxt 特定 SSR、路由和数据获取，Vite 构建配置，以及 React 或 Svelte 框架。
常见问题
Vue 3 响应式对象解构后失去响应性怎么办？
使用 toRefs() 或 toRef() 将响应式对象解构为 ref，或直接使用原始 reactive 对象，避免解构后直接赋值。
Vue 3 watcher 循环触发报 Maximum recursive updates exceeded 怎么办？
检查 watcher 内是否修改了所监听的源，避免在 watcher 中直接修改源数据；可使用 deep: false 或使用 watchEffect 的 flush 选项。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vue-x-8/raw/index.md 读取 Vue 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vue-x-8/raw/index.md（查看排版版本）