关于 vue-options-api-best-practices
面向 Vue.js 开发者的 Options API 技能，涵盖实践建议、TypeScript 类型处理和常见陷阱，适用于编写或维护 Options API 组件。
主要功能
- 01推断组件属性类型
- 02确保 Options API 的 this 类型安全
- 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