关于 vue-options-api-best-practices
面向 Vue.js 开发者的 Options API 技能，涵盖 TypeScript 用法，以及方法和生命周期中的常见问题。
主要功能
- 01组件与上下文的 TypeScript 类型
- 02事件与复杂属性的类型
- 03计算属性返回类型指导
- 04方法与生命周期绑定问题
- 05处理有状态方法的生命周期
适用场景
- 01为 Options API 组件添加 TypeScript 类型
- 02排查方法或钩子未绑定的问题
- 03避免组件实例间共享防抖状态
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vue-options-api-best-practices确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
reference/no-arrow-functions-in-lifecycle-hooks.mdno-arrow-functions-in-methods.mdstateful-methods-lifecycle.mdts-options-api-arrow-functions-validators.mdts-options-api-computed-return-types.mdts-options-api-proptype-complex-types.mdts-options-api-provide-inject-limitations.mdts-options-api-type-event-handlers.mdts-options-api-use-definecomponent.mdts-strict-mode-options-api.md详细介绍
Vue.js Options API 最佳实践、TypeScript 集成和常见陷阱。
TypeScript
- 需要为组件属性启用 TypeScript 类型推断 → 参见 ts-options-api-use-definecomponent
- 为 Options API 的
this上下文启用类型安全 → 参见 ts-strict-mode-options-api - 在旧版 TypeScript 中使用属性校验器 → 参见 ts-options-api-arrow-functions-validators
- 事件处理函数参数需要适当的类型安全保障 → 参见 ts-options-api-type-event-handlers
- 需要使用接口为对象或数组属性标注类型 → 参见 ts-options-api-proptype-complex-types
- 注入的属性完全缺少 TypeScript 类型 → 参见 ts-options-api-provide-inject-limitations
- 复杂的计算属性缺少清晰的类型文档 → 参见 ts-options-api-computed-return-types
方法与生命周期
- 方法未绑定到组件实例上下文 → 参见 no-arrow-functions-in-methods
- 生命周期钩子无法访问组件数据 → 参见 no-arrow-functions-in-lifecycle-hooks
- 防抖函数在多个组件实例间共享状态 → 参见 stateful-methods-lifecycle
评论
支持 Markdown