vue-options-api-best-practices

vue-options-api-best-practices 技能概览

这个技能能帮你解决什么问题

vue-options-api-best-practices 是一套聚焦型指导，专门用于编写和审查使用 Options API 的 Vue 3 组件，尤其适合你的代码库里仍然以 data()、methods、生命周期 hooks 以及基于 this 的组件逻辑为主的场景。它的核心作用不是从零教你学 Vue，而是帮你避免那些会让 Options API 代码变得脆弱、类型不稳或容易误导维护者的典型错误。

最适合仍在持续交付 Options API 的团队

这个技能尤其适合以下前端团队：正在维护 Vue 2 到 Vue 3 迁移的项目、在企业级 Vue 应用中统一采用 Options API 的团队，或是在旧组件模式下配合 TypeScript 开发的团队。如果你的日常工作经常涉及 defineComponent、prop 类型声明、生命周期 hooks，或者排查 this 相关问题，那么 vue-options-api-best-practices 会非常实用。

它和普通 Vue 提示词有什么不同

一般的提示词很可能会给出 Composition API 示例、混用多种写法，或者直接忽略 TypeScript 的边界问题。这个技能则明确限定在 Options API 方案内，并且会重点指出这些具体坑点：

• 在 methods 和生命周期 hooks 中使用箭头函数，导致 this 失效
• 带状态的 debounce 或 throttle 方法被多个组件实例共享
• TypeScript 下 prop、computed、事件处理器和 inject 的类型限制
• 老版本 TypeScript 在 prop validator 上的兼容性注意事项

什么情况下值得安装这个技能

当你希望在现有 Options API 组件中，针对重构、代码审查、类 lint 修复、或迁移过程中需要稳妥改动时，得到一致、低猜测成本的答案，就应该安装 vue-options-api-best-practices。尤其当你需要模型尊重遗留结构，而不是“好心”把所有内容重写成 Composition API 时，它会特别有价值。

如何使用 vue-options-api-best-practices 技能

vue-options-api-best-practices 的安装上下文

把这个技能从 vuejs-ai/skills 仓库添加到你的 agent 能访问项目文件的环境中。常见安装方式如下：

npx skills add vuejs-ai/skills --skill vue-options-api-best-practices

如果你的环境使用的是其他 loader，关键点不是命令本身，而是要确保启用了 skills/vue-options-api-best-practices 目录，让 agent 能读取 SKILL.md 和 reference/ 下的文件。

先读这些文件

对于这个技能，最快能获得高价值信息的阅读顺序是：

1. skills/vue-options-api-best-practices/SKILL.md
2. skills/vue-options-api-best-practices/reference/no-arrow-functions-in-methods.md
3. skills/vue-options-api-best-practices/reference/no-arrow-functions-in-lifecycle-hooks.md
4. skills/vue-options-api-best-practices/reference/stateful-methods-lifecycle.md
5. 再根据你的问题补充对应的 TypeScript 参考：
   • reference/ts-options-api-use-definecomponent.md
   • reference/ts-strict-mode-options-api.md
   • reference/ts-options-api-proptype-complex-types.md
   • reference/ts-options-api-type-event-handlers.md
   • reference/ts-options-api-provide-inject-limitations.md
   • reference/ts-options-api-computed-return-types.md
   • reference/ts-options-api-arrow-functions-validators.md

这个技能需要什么输入

vue-options-api-best-practices 在你提供真实组件代码或接近真实情况的代码片段时效果最好，同时要明确说明：答案必须保持在 Options API 范围内。建议一并提供：

• Vue 版本
• 如果相关，TypeScript 版本
• 当前组件代码
• 具体的 bug、warning 或重构目标
• 是否禁止使用 Composition API
• 是否存在多个组件实例

如果缺少这些上下文，模型往往抓不准某种写法到底为什么不安全。

如何把模糊需求变成高质量提示词

较弱的提示词：
“Fix this Vue component.”

更强的提示词：
“Use the vue-options-api-best-practices skill. Keep this component in Vue 3 Options API with defineComponent. Identify any this binding issues, prop typing problems, and lifecycle mistakes. If debounce or throttle is present, make sure each component instance gets its own stateful function and include cleanup in unmounted().”

这个版本的好处在于：既告诉技能要按什么标准检查，也明确了哪些东西不能改。

用于代码审查的提示词模式

在审查现有文件时，可以直接这样用：

“Apply vue-options-api-best-practices to this component. Return:

1. a short issue list grouped by severity,
2. the corrected Options API code,
3. why each change matters,
4. any TypeScript-specific follow-up needed.”

这种写法很有效，因为这个技能的参考内容本身就是围绕具体坑点组织的，而不是停留在宽泛的风格建议上。

用于修复 TypeScript 问题的提示词模式

如果你的主要问题是类型，可以把版本和症状一起说清楚：

“Use vue-options-api-best-practices for Frontend Development. This is a Vue 3 Options API component on TypeScript 4.6. Fix typing for props, computed properties, event handlers, and injected values without converting to Composition API. Explain any legacy TS workaround that applies.”

这样能更明确地激活这个技能里的 TypeScript 参考内容，包括 4.7 之前 validator 相关的兼容性注意事项。

这个技能最擅长落实的高价值规则

vue-options-api-best-practices 最值得依赖的检查项包括：

• methods 中绝不要使用箭头函数
• Options API 的生命周期 hooks 中绝不要使用箭头函数
• debounce 或 throttle 这类实例有状态方法要在 created() 中为每个实例单独创建
• 在 unmounted() 中清理这些带状态函数
• 使用 defineComponent 提升类型推断效果
• 对复杂对象、数组、函数或联合类型的 props 使用 PropType
• 当 computed 的推断不清晰时，显式补上返回类型
• 在 Options API 中谨慎处理 inject 的类型声明

这些问题最容易引发运行时 bug，或者制造令人困惑的 TypeScript 报错。

一个好的使用请求示例

一个实用的 vue-options-api-best-practices usage 请求通常像这样：

“Use vue-options-api-best-practices on the component below. Keep Options API only. Find any broken this usage, convert invalid arrow-function methods or hooks, and improve TypeScript for complex props and computed values. If any debounced method is shared across instances, move setup to created() and add teardown in unmounted().”

如何在迁移流程中使用它

如果你正在逐步迁移代码库，建议把这个技能当作“护栏”，而不是一次性重写工具：

1. 先在一个有明确 bug 或类型问题的组件上运行
2. 查看 diff，确认它改动了哪些模式
3. 把团队认可的修复方式沉淀成规范
4. 用同样的提示词应用到相似组件
5. 最后再扩大到整个目录或批量处理

这样能减少无谓 churn，也能让这个技能更贴合你现有的架构约束。

安装前需要了解的实际边界

这个技能本来就是为窄场景设计的。只有当你的组件已经基于 Options API 组织时，它的帮助才最明显。以下场景它就没那么适合：

• Composition API 项目
• 超出组件本身、偏 Nuxt 或其他框架级的架构问题
• 样式、测试或构建流水线问题
• 超出已有 Options API 参考范围的复杂响应式设计

如果你的核心诉求是“教我 Vue”，那它太专了；如果你的诉求是“帮我避免微妙的 Options API 错误”，那它就很对口。

vue-options-api-best-practices 技能 FAQ

vue-options-api-best-practices 对新手友好吗

友好，前提是你已经能认出 Vue 组件的基本结构。它的参考内容足够具体，示例也偏实战，新手可以用它比较安全地修正真实代码。它不是完整的 Vue 教程，但作为纠正常见 Options API 错误的工具，效果很强。

这个技能只支持 Vue 3 吗

文案重点放在 Vue 3 的 Options API 上，但其中一些核心建议同样适用于 Vue 2 风格的 Options API，尤其是 methods 和生命周期 hooks 里关于 this 绑定的规则。至于 TypeScript 相关建议，在 Vue 3 配合 defineComponent 时最有参考价值。

vue-options-api-best-practices 比普通提示词更好吗

在这个细分场景里，通常是的。它最大的价值在于控制范围：答案会被约束在 Options API 内，重点提示已知坑点，并避免泛泛地建议“直接改写成 Composition API”。因此它对维护型团队和代码审查流程更有用。

什么情况下不该使用 vue-options-api-best-practices

如果你的项目主要基于 Composition API、<script setup>，或者是以框架特定代码为主、Options API 问题只是次要矛盾，那就不适合选择 vue-options-api-best-practices。它也不适用于泛化的前端架构问题，或与组件无关的 TypeScript 工具链问题。

vue-options-api-best-practices install 会附带自动化能力吗

没有证据表明这个技能目录里包含脚本或自动化检查。它的价值来自经过整理的参考指导，而不是工具本身。你应该把 vue-options-api-best-practices install 理解为：为 agent 启用一套知识和约束，而不是替代 linter。

它能缓解 TypeScript strict mode 的痛点吗

可以，这正是它较强的一类使用场景。它会引导你正确使用 defineComponent、更严格地处理 this、用 PropType 声明复杂 prop、补齐事件处理器类型、为 computed 标注返回类型，以及注意 Options API 下 inject 的类型限制——这些都是 strict mode 中团队很容易踩坑的地方。

如何提升 vue-options-api-best-practices 的使用效果

给模型完整的组件上下文

想提高 vue-options-api-best-practices 的输出质量，最快的方法就是直接贴完整组件，而不是零散几行代码。这个技能里的很多检查都依赖 data、methods、props、hooks 以及实例复用之间的相互关系。

明确写出不可协商的约束

如果你必须坚持使用 Options API，就直接写明白：
“Do not convert to Composition API.”
这一句就能拦住混合 Vue 环境里最常见的跑偏回答。

提供会影响建议的版本信息

有些建议和版本强相关，尤其是 TypeScript。如果你使用的是早于 4.7 的 TypeScript，那么 validator/default 中关于箭头函数的兼容性写法可能就适用。你如果不提供版本，模型很可能给出只适用于新版本的建议，理论上没错，但在你的技术栈里落不了地。

先让它找问题，再让它改代码

通常更好的输出来自两步式指令：

1. 先识别所有违反 Options API 最佳实践的地方
2. 再给出修正后的代码

这样能减少只改到一半的情况，也方便你判断模型是否真的抓到了 vue-options-api-best-practices 想强调的那些坑点。

明确指出“多实例共享”的风险

如果组件会出现在列表里，或者会被频繁实例化，一定要说出来。这样更有利于让技能发现这类问题：把 debounce 或 throttle 这类有状态方法直接定义在 methods 里，结果被多个实例共享；正确做法应该是在 created() 中按实例创建。

要求解释和改动一一对应

一个高质量提示词可以是：
“Fix the code and explain each change in one sentence.”
这样输出更便于审计，也更适合把同样的修复模式复用到前端代码库的其他位置。

需要重点复查的常见失误

即使用了 vue-options-api-best-practices，也建议你重点检查以下输出问题：

• 不小心被改写成 Composition API
• methods 或生命周期 hooks 中仍然残留箭头函数
• debounce 函数只创建一次，导致多个实例共享
• unmounted() 中缺少清理逻辑
• 本该用 PropType 的地方仍然是模糊的 prop 类型
• 对 Options API 下带类型的 inject 过度自信

这些地方比代码风格更关系到正确性。

通过提示词模板提升复用性

对于团队来说，最好为常见任务建立统一的 vue-options-api-best-practices guide 提示词模板，例如：

• code review
• bug fix
• TS strict-mode cleanup
• migration-safe refactor

这样能让输出更稳定，也能减少重复做 prompt engineering。

第一轮回答后继续迭代

如果第一次结果已经接近目标，但还不完整，可以直接补一句更聚焦的追问：
“Re-check for any remaining Options API this binding issues and TS typing gaps. Keep the previous structure.”
这种短小、迭代式的追问，往往比一开始就要求“又大又全的完美答案”更有效。

把它当成评审标准，而不只是救火工具

vue-options-api-best-practices for Frontend Development 的最佳长期用法，其实是预防型使用。不要等 bug 出现后再用，应该在新组件进入 review 时就运行一遍。只要它成为遗留友好的 Vue 开发中的可复用检查标准，价值会随着时间持续放大。