Vue
专为Vue 3应用提供构建、调试与代码审查的AI助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vue。 它的用途是：专为Vue 3应用提供构建、调试与代码审查的AI助手 完整的 Skill 内容见：https://321skill.com/skills/vue-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的Vue 3组件里，一个用`ref`包装的数组，在模板中循环渲染正常，但当我通过`.push`方法添加新项后，视图却不更新，控制台也没有错误。’ 它会分析你的代码，指出你可能直接对`.value`进行了重新赋值（如`list.value = newList`）而不是修改其内容，或者是在异步操作中丢失了响应式上下文，并给出使用`reactive`包装对象、或使用`[...list.value, newItem]`进行不可变更新等解决方案。
介绍
这个Skill专门解决Vue 3开发中常见的疑难杂症和性能瓶颈。当你的应用出现UI不更新、响应性丢失、组件通信异常、性能卡顿或从Vue 2迁移遇到障碍时，它可以提供精准的诊断和解决方案。
它通过分析你的代码、错误信息和项目上下文，定位问题根源，例如忘记使用.value、响应式对象解构失活、计算属性或侦听器逻辑错误、Pinia状态管理问题、Vue Router导航守卫冲突等。它不仅能指出错误，还能解释Vue 3的核心原理，帮助你从根本上理解问题。
这个Skill非常适合正在开发或维护Vue 3应用的前端开发者、全栈工程师和智能体开发者。无论是处理复杂的响应式数据流，还是优化大型列表的渲染性能，它都能提供专业的指导。
使用建议：在遇到具体错误或不确定的Vue 3 API用法时，提供尽可能多的上下文信息，如代码片段、控制台错误、Vue Devtools截图等，这样能获得更精准的解答。注意，它主要聚焦于Vue 3核心生态，对于Nuxt、Vite配置或React/Svelte框架的问题，建议使用专门的Skill。
核心特点
与通用前端调试工具不同，它深度聚焦Vue 3框架特有的响应式系统、Composition API和核心生态库（Pinia、Vue Router），能精准诊断如“Maximum recursive updates exceeded”、模板ref为null、SSR水合不匹配等框架级难题。
注意事项
不适用于Nuxt.js特有的服务端渲染、路由和数据获取，也不处理Vite构建配置、React或Svelte框架的问题。
常见问题
UI没有在状态改变后更新怎么办？
这通常是响应性丢失或`.value`访问问题，请提供相关代码片段，我会帮你检查响应式变量是否正确声明和使用。
从Vue 2迁移到Vue 3的Composition API有什么建议？
可以提供你的Options API代码，我会帮你重构为Composition API并解释`<script setup>`的用法和注意事项。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vue-x/raw/index.md 读取 Vue 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vue-x/raw/index.md（查看排版版本）