Vue
Vue 3 专业调试与开发助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vue。 它的用途是：Vue 3 专业调试与开发助手 完整的 Skill 内容见：https://321skill.com/skills/vue-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的Vue 3组件中，用v-model绑定一个props，但子组件修改后父组件不更新，控制台报“Extraneous non-props attributes”。' 它会检查子组件是否正确使用了defineProps和defineEmits，建议使用v-model的modelValue约定或显式声明emits，并排查是否有多余属性透传。
介绍
这个 Skill 专门解决 Vue 3 开发中频繁出现的响应式陷阱、组件通信异常、路由参数失效、状态管理报错等棘手问题。当 UI 不随状态更新、响应式对象解构后失去响应、忘记 .value、watch 不触发或陷入死循环、props/v-model 同步中断、模板 ref 为 null、SSR 水合不匹配、路由参数变化组件不刷新、Pinia 报“getActivePinia() was called but there was no active Pinia”、控制台出现“Failed to resolve component”或“Extraneous non-props attributes”、页面因错误白屏、长列表或大对象导致输入卡顿、图表库放入 ref() 后失效、scoped 样式穿透失败、以及从 Vue 2 Options API 迁移到 Composition API 和 script setup 时，它都能提供精准分析和修复方案。
使用时，只需将出错的代码片段或控制台报错粘贴给 AI，它会自动识别 Vue 3 版本特性、检查响应式依赖链、分析组件树和路由配置，并给出具体修改建议。例如，对于 watch 死循环，它会建议使用 deep 或 flush 选项；对于 Pinia 未初始化，它会检查 store 的创建时机。支持对 composable、directive、transition 等高级特性进行审查。
适合正在使用 Vue 3 进行日常开发的前端工程师、全栈开发者，以及从 Vue 2 迁移到 Vue 3 的团队。也适用于需要快速定位线上 Vue 应用 bug 的测试和运维人员。对于使用 Nuxt 进行 SSR 开发的用户，本 Skill 仅处理 Vue 核心层问题，不涉及 Nuxt 特有的路由和数据获取。
建议在描述问题时附带完整的组件代码、控制台报错和 Vue 版本信息，以便 AI 更准确地定位根因。对于复杂的状态管理问题，可先提供 Pinia store 的定义和使用方式。注意，本 Skill 不处理 Vite 构建配置、React 或 Svelte 相关的问题。
核心特点
与通用的编程助手不同，本 Skill 深度理解 Vue 3 内部机制（如 Proxy 响应式、Suspense、Teleport、SSR 水合等），能精准识别因响应式丢失、组件生命周期、模板编译等引起的特定报错，并提供 Vue 官方推荐的解决方案，而非泛泛的代码建议。
注意事项
不适用于 Nuxt 特有的 SSR、路由和数据获取，以及 Vite 构建配置、React 或 Svelte 项目。
常见问题
为什么 Pinia 报错 'getActivePinia() was called but there was no active Pinia'？
通常是因为在组件外（如路由守卫、普通函数）调用了 useStore，需确保 Pinia 实例已创建并传入 app.use(pinia)。
watch 陷入 'Maximum recursive updates exceeded' 循环怎么办？
检查 watch 的回调中是否修改了依赖的响应式数据，可添加 deep: true 或使用 flush: 'post'，或改用 watchEffect 并注意副作用触发条件。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vue-x-6/raw/index.md 读取 Vue 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vue-x-6/raw/index.md（查看排版版本）