Options API 是一种通过在配置对象中声明一系列选项来定义 Vue.js 组件的模式。此页面记录了可用的选项、它们的功能以及它们如何集成到 Vue 的组件系统中。
有关构建组件的较新 Composition API 方法的信息，请参阅组件系统页面。
Options API 通过将不同的关注点分离到特定的选项属性中来组织组件代码。使用 Options API 定义组件时，您需要提供一个具有 data、methods、computed 和生命周期钩子等属性的对象。
Sources: packages/runtime-core/src/componentOptions.ts106-314 packages/runtime-core/src/component.ts245-272
data 选项是一个函数，它返回一个包含组件响应式状态的对象。Vue 会自动使所有顶层属性变为响应式。
在模板或其他组件选项中访问时，数据属性可以通过 this 访问。
Sources: packages/runtime-core/__tests__/apiOptions.spec.ts22-48 packages/runtime-core/src/componentOptions.ts382-404
Props 允许组件从其父组件接收数据。它们可以声明为字符串数组以适应简单用例，也可以声明为具有验证选项的对象以适应更复杂的场景。
Props 在组件中可以通过 this 访问，但它是只读的。如果您尝试直接修改 props，Vue 会发出警告。
Sources: packages/runtime-core/src/componentProps.ts43-168 packages/runtime-core/__tests__/componentProps.spec.ts26-64
Methods 是绑定到组件实例的函数。它们可以在模板、事件处理程序中使用，或者从其他方法调用。
Sources: packages/runtime-core/src/componentOptions.ts321-323 packages/runtime-core/__tests__/apiOptions.spec.ts84-123
Computed properties是派生状态，它依赖于其他响应式数据。它们根据其依赖项进行缓存，并且仅在这些依赖项更改时重新评估。
Sources: packages/runtime-core/src/componentOptions.ts316-319 packages/runtime-core/__tests__/apiOptions.spec.ts50-82
Watch 选项允许你在特定的响应式属性更改时执行副作用。它们可以监视 data 属性、computed 属性或函数。
Sources: packages/runtime-core/__tests__/apiOptions.spec.ts143-336 packages/runtime-core/src/componentOptions.ts333-341
components 选项注册可在当前组件模板中使用的子组件。
Sources: packages/runtime-core/src/componentOptions.ts154 packages/runtime-core/__tests__/apiCreateApp.spec.ts151-184
directives 选项注册可在组件模板中使用的自定义指令。
Sources: packages/runtime-core/src/componentOptions.ts157 packages/runtime-core/__tests__/apiCreateApp.spec.ts186-234
provide 和 inject 选项实现了组件间的依赖注入，允许祖先组件提供数据，任何后代组件都可以注入，而无需考虑组件层级深度。
Sources: packages/runtime-core/src/componentOptions.ts343-352 packages/runtime-core/__tests__/apiCreateApp.spec.ts80-113
生命周期钩子是组件生命周期中不同阶段会被调用的特殊方法。
Sources: packages/runtime-core/src/componentOptions.ts418-435 packages/runtime-core/src/component.ts516-568
beforeCreate：在实例初始化后立即调用。created：在观察数据和设置 computed 属性后调用。beforeMount：在挂载到 DOM 之前调用。mounted：在组件挂载后调用。beforeUpdate：在数据更改、DOM 打补丁之前调用。updated：在数据更改导致 DOM 重新渲染后调用。beforeUnmount：在组件被卸载之前调用。unmounted：在组件被卸载后调用。来源： packages/runtime-core/src/componentOptions.ts428-435 packages/runtime-core/src/enums.ts
当 Vue 使用 Options API 创建组件时，会遵循此过程
来源： packages/runtime-core/src/component.ts604-706 packages/runtime-core/src/componentOptions.ts518-608
当一个组件继承另一个组件或使用混入 (mixins) 时，Vue 会根据特定策略合并选项
来源： packages/runtime-core/src/componentOptions.ts524-544 packages/runtime-core/src/componentOptions.ts653-901
Options API 和 Composition API 可以协同工作，其中 setup() 函数充当桥梁
来源： packages/runtime-core/src/component.ts800-916 packages/runtime-core/src/componentOptions.ts131-143
使用 Options API 定义组件有多种方式
defineComponent 辅助函数（支持 TypeScript）defineComponent 函数不会改变运行时行为，但能提供更好的 TypeScript 支持。
来源： packages/runtime-core/src/apiDefineComponent.ts146-302
Vue 为每个组件实例创建一个代理，允许您通过 `this` 在方法、计算属性和生命周期钩子中访问所有组件选项。
当您在组件方法或生命周期钩子中使用 `this` 时，您实际上是在访问这个代理，它为所有组件选项提供了一个统一的接口。
来源： packages/runtime-core/src/componentPublicInstance.ts284-345 packages/runtime-core/__tests__/componentPublicInstance.spec.ts76-106
Options API 按选项类型（data, methods, computed）组织代码，而 Composition API 按逻辑关注点组织代码。Options API 通常对简单组件更直接，而 Composition API 为复杂组件提供了更大的灵活性和更好的代码复用。
| Options API | 组合式 API |
|---|---|
| 按选项类型组织 | 按逻辑关注点组织 |
| 对初学者更直观 | 对复杂用例更灵活 |
| 使用 `this` 访问组件状态 | 使用对响应式状态的直接引用 |
| 有限的代码复用模式（混入） | 通过可组合函数更好地复用代码 |
| 大部分 Vue 文档支持更好 | 对 TypeScript 更友好 |
两种 API 都完全支持，并且可以在同一个项目甚至同一个组件中一起使用。
来源： packages/runtime-core/src/component.ts800-916 packages/runtime-core/src/componentOptions.ts518-608
Options API 提供了一种结构化的方式来定义 Vue 组件。它将关注点分成不同的选项，使其直观且对初学者友好。对于更复杂的组件或当代码复用是首要任务时，可以考虑使用 Composition API，它可以根据需要与 Options API 结合使用。