Vue
专为Vue 3应用提供构建、调试与代码审查的AI助手。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vue。 它的用途是：专为Vue 3应用提供构建、调试与代码审查的AI助手。 完整的 Skill 内容见：https://321skill.com/skills/vue/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我的Vue 3组件里有一个用`ref`包裹的数组，我向里面push了新数据，但模板没有更新，这是为什么？” 它会分析你的代码，指出直接修改数组的索引或长度可能不会触发响应式更新，并建议使用`splice`方法或重新赋值整个数组。或者，当你遇到“Maximum recursive updates exceeded”错误时，告诉AI你的侦听器代码，它会帮你检查是否在侦听器中同步修改了被侦听的数据，导致了无限循环。
介绍
这个Skill旨在帮助开发者解决Vue 3应用开发中遇到的各种疑难杂症。它专注于Vue 3的核心特性，包括响应式系统、组件、组合式API、Pinia状态管理、Vue Router路由、表单处理以及性能优化。当你的应用出现UI不更新、响应性丢失、侦听器不触发或循环、模板引用为null、SSR水合不匹配、路由参数变化不触发组件更新等典型Vue问题时，它可以提供诊断和解决方案。
使用方式非常直接。当你遇到Vue相关的开发难题时，只需向集成了此Skill的AI助手描述你的问题或展示相关代码片段。助手会分析上下文，识别问题根源，并给出具体的修复建议、代码示例或最佳实践指导，帮助你快速定位并解决问题。
它非常适合正在使用Vue 3进行应用开发的前端或全栈开发者。无论是刚接触Vue 3的新手，在理解响应式原理或组合式API时遇到困惑，还是经验丰富的开发者，在调试复杂状态逻辑、性能瓶颈或迁移旧项目时，都能从中获得精准的帮助。
需要注意的是，此Skill专注于Vue 3框架本身。对于基于Vue的Nuxt框架所特有的SSR、路由和数据获取问题，建议使用专门的Nuxt Skill。同样，对于Vite构建配置、React或Svelte等其他框架的问题，它并不适用。在提问时，尽可能提供清晰的错误信息、相关代码和上下文，有助于获得更准确的解答。
核心特点
与通用编程助手不同，它深度聚焦Vue 3生态，能精准识别如“响应式丢失”、“.value遗忘”、“水合不匹配”等Vue特有问题的模式并提供针对性解决方案；同时，它明确划定了边界，不处理Nuxt、Vite配置或其他框架的问题，确保建议的专业性和准确性。
注意事项
不适用于Nuxt特定的SSR、路由和数据获取，也不处理Vite构建配置、React或Svelte等其他框架的问题。
常见问题
Vue 3中为什么解构会丢失响应性？
直接解构会破坏Proxy代理。需要使用`toRefs`或`storeToRefs`（针对Pinia）来保持响应性。
Pinia报错“getActivePinia() was called but there was no active Pinia”怎么办？
通常是因为在Pinia store实例化之前就尝试使用它。请确保在Vue应用挂载（app.use(pinia)）之后再使用store。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vue/raw/index.md 读取 Vue 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vue/raw/index.md（查看排版版本）