Vue
专为 Vue 3 开发者打造的调试与代码审查助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vue。 它的用途是：专为 Vue 3 开发者打造的调试与代码审查助手 完整的 Skill 内容见：https://321skill.com/skills/vue-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的 Vue 3 组件里，一个用 reactive 创建的对象，在解构赋值给另一个变量后，新变量就不再是响应式的了，页面不更新，怎么办？' 它会首先解释 Vue 3 响应式代理与原始对象引用的区别，然后指出解构会破坏响应式连接，并给出解决方案：使用 `toRefs` 解构、或将需要响应式的部分用 `computed` 包装，并附上代码示例。
介绍
这个 Skill 专门解决 Vue 3 开发中令人头疼的各种响应式和运行时问题。当你的界面在状态改变后不更新、响应式对象在解构或重新赋值后失去响应性、忘记使用 .value、侦听器不触发或陷入死循环、props 或 v-model 停止同步、模板引用为 null、SSR 出现水合不匹配、路由参数改变不触发组件重载、Pinia 报错“getActivePinia() was called but there was no active Pinia”、控制台出现“Failed to resolve component”或“Extraneous non-props attributes”警告、页面因错误而空白、长列表或大对象导致输入卡顿、图表或地图库在放入 ref() 后失效、作用域样式无法穿透到子组件，或是从 Vue 2 Options API 迁移到 Composition API 和 script setup 时，它都能提供专业的诊断和修复建议。
使用方式非常直接：在遇到上述任何 Vue 3 开发难题时，向搭载此 Skill 的 AI 助手描述你的问题、错误信息或相关代码片段。助手会像一个经验丰富的 Vue 专家，帮你分析根本原因，并提供具体的代码修改方案、最佳实践建议或排查步骤。它不仅能指出问题所在，还能解释背后的原理，帮助你加深对 Vue 3 的理解。
它最适合正在构建、调试或审查 Vue 3 应用程序的开发者。无论是处理复杂的响应式逻辑、优化组件性能、集成 Vue Router 和 Pinia，还是确保表单和状态管理的正确性，这个 Skill 都能提供强有力的支持。它尤其适合那些希望提升代码质量、快速定位棘手 Bug 的开发者。
需要注意的是，这个 Skill 专注于 Vue 3 核心框架及其官方生态（如 Pinia, Vue Router）。对于 Nuxt 框架特有的 SSR、路由和数据获取问题，应使用专门的 Nuxt skill。同样，它不处理 Vite 构建配置，也不适用于 React 或 Svelte 项目。在提问时，尽可能提供详细的错误信息、代码上下文和复现步骤，有助于获得更精准的解答。
核心特点
与通用编程助手不同，它深度聚焦于 Vue 3 框架特有的响应式系统、Composition API 及官方生态库（Pinia, Vue Router）的疑难杂症，能精准诊断如“响应式丢失”、“.value 遗漏”、“水合不匹配”等 Vue 专属问题，并提供符合 Vue 3 最佳实践的解决方案。
注意事项
不适用于 Nuxt 框架特有的 SSR、路由和数据获取问题，也不处理 Vite 构建配置或 React/Svelte 项目。
常见问题
UI 在状态更新后不刷新怎么办？
可能是响应式丢失或 .value 使用不当。请提供相关代码片段，我会帮你检查 ref、reactive 的使用以及解构赋值是否正确。
Pinia 报错“getActivePinia() was called but there was no active Pinia”如何解决？
这通常意味着在 Pinia 实例尚未激活的上下文中访问了 store。请检查 store 的调用时机和组件生命周期，确保在 app.use(pinia) 之后使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vue-x-4/raw/index.md 读取 Vue 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vue-x-4/raw/index.md（查看排版版本）