组合式 API

概述

组合式 API 引入了一个新的setup() 组件选项，作为使用组合式 API 功能的入口点。在setup() 函数内部，你可以使用各种响应性 API，例如ref、reactive 和computed 来创建响应式状态，并使用生命周期钩子，例如onMounted 和onUpdated。

来源

设置函数

setup 函数在组件创建之前执行，一旦 props 被解析。它作为组件内组合式 API 的入口点。

签名

props：包含已解析 props 的响应式对象
context：包含有用属性的对象
返回值：向模板暴露属性的对象，或是一个渲染函数

Setup 上下文

setup 函数接收一个上下文对象，包含以下属性

属性	描述
`attrs`	传递给组件的非 prop 属性
`slots`	组件插槽
`emit`	用于触发自定义事件的方法
`expose`	用于向父组件暴露属性的函数
`listeners`	事件监听器 (仅限 Vue 2)

来源

与 Vue 实例生命周期的集成

setup 函数被集成到 Vue 现有的初始化流程中。它在initState 阶段被调用，在beforeCreate 钩子之后，但在数据、方法和计算属性初始化之前。

来源

Setup 函数实现

initSetup 函数处理组件的setup 选项的执行

它创建了一个 setup 上下文，可以访问 attrs、slots、listeners 和 emit
它设置当前组件实例，以便组合式 API 钩子能够正常工作
它使用 props 和 context 执行 setup 函数
根据返回值，它会
- 设置一个渲染函数（如果返回一个函数）
- 向组件实例暴露响应式属性（如果返回一个对象）

来源

响应性系统集成

组合式 API 使用了从 Vue 3 回源到 Vue 2.7 的响应性系统。它利用了新的ref、reactive、computed 以及其他响应性 API。

Ref 自动解包

实现中一个重要的方面是 ref 的自动解包。当setup 返回值中的属性在模板中或通过this 访问时，ref 会自动解包为它们的内部值。

来源

使用 EffectScope 管理副作用

Vue 2.7 的组合式 API 使用EffectScope 类来管理和清理响应式副作用。每个组件实例在初始化期间都会创建一个 effect scope，它用于在组件卸载时收集并自动清理所有响应式副作用。

来源

辅助组合式工具函数

Vue 2.7 提供了几个辅助函数，用于在组合式函数内部访问 setup 上下文的部分内容

功能	描述
`useSlots()`	访问组件的插槽
`useAttrs()`	访问非 prop 属性
`useListeners()`	访问事件监听器（仅限 Vue 2）
`getCurrentInstance()`	访问当前组件实例

来源

与选项式 API 的集成

在setup 函数中定义的属性会与选项式 API 中的属性合并。如果存在命名冲突

如果一个属性同时在setup 和其他选项中定义，则setup 版本优先
以_ 或$ 开头的属性是保留的，如果在 setup 中使用，将生成警告

来源

使用示例

基本用法

来源

返回一个渲染函数

setup 函数也可以返回一个渲染函数

来源

test/unit/features/v3/apiSetup.spec.ts31-40

限制和边缘情况

避免直接修改 Props

传递给setup 函数的 Props 是响应式的，但不应直接修改，因为这会违反单向数据流原则。

Setup 函数中的响应性

在setup 函数本身中访问的所有响应式数据不会导致组件更新。跟踪仅发生在setup 函数内部创建的函数中。

来源

test/unit/features/v3/apiSetup.spec.ts287-312

TypeScript 支持

组合式 API 在设计时考虑了 TypeScript，并且与选项式 API 相比提供了更好的类型推断。

来源

结论

Vue 2.7 中的组合式 API 提供了一种向前兼容的方式，以更灵活和可复用的方式组织组件逻辑。它与选项式 API 并存，允许开发者在现有应用中逐步采用它，或者在它能带来益处的特定复杂组件中使用它。

通过使用组合式 API，开发者可以更好地组织相关代码，在组件之间创建可复用的逻辑，并从改进的 TypeScript 支持中受益。