Vue Options Api Best Practices

作者 vuejs-aic9d355ff23f6MIT收录于 2026年10月8日更新于 2026年10月8日

Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.

AI 生成的概览

关于 Vue 3 选项式 API 风格、TypeScript 类型与常见陷阱的参考指南。

功能
该技能为使用选项式 API 编写 Vue 3 组件提供最佳实践指导,涵盖 TypeScript 集成与常见错误。它把具体问题导向十份参考文档,例如 props 类型、计算属性返回类型、事件处理函数以及 provide/inject。每份参考只给出选项式 API 的解决方案。它产出的是说明性指导,而非代码成品。
适用场景
适用于处理使用 data()、methods 和 this 上下文的 Vue 3 组件,尤其是在添加 TypeScript 类型或排查上下文与生命周期问题时。当 methods 或生命周期钩子中的箭头函数引发问题,或防抖函数在组件实例间共享状态时,也适合使用。
运行要求
无需脚本或运行时依赖,仅为说明与参考文档。智能体需要能够访问随附的参考文件。

Vue.js Options API best practices, TypeScript integration, and common gotchas.

TypeScript

  • Need to enable TypeScript type inference for component properties → See ts-options-api-use-definecomponent [blocked]
  • Enabling type safety for Options API this context → See ts-strict-mode-options-api [blocked]
  • Using old TypeScript versions with prop validators → See ts-options-api-arrow-functions-validators [blocked]
  • Event handler parameters need proper type safety → See ts-options-api-type-event-handlers [blocked]
  • Need to type object or array props with interfaces → See ts-options-api-proptype-complex-types [blocked]
  • Injected properties missing TypeScript types completely → See ts-options-api-provide-inject-limitations [blocked]
  • Complex computed properties lack clear type documentation → See ts-options-api-computed-return-types [blocked]

Methods & Lifecycle

  • Methods aren't binding to component instance context → See no-arrow-functions-in-methods [blocked]
  • Lifecycle hooks losing access to component data → See no-arrow-functions-in-lifecycle-hooks [blocked]
  • Debounced functions sharing state across component instances → See stateful-methods-lifecycle [blocked]

来源与署名

来源:vuejs-ai/skills位于skills/vue-options-api-best-practices提交c9d355f

许可证: MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架