在 Vue 3 中,setup()
函数是组合式 API 的核心部分,提供了一种新的方式来定义组件的逻辑。它在组件实例创建期间的非常早期阶段调用,是在 beforeCreate
和 created
生命周期钩子之前执行的。setup()
函数的主要用途包括:
1. 定义响应式状态
在 setup()
函数中,可以使用 Vue 提供的响应式 API(如 ref
和 reactive
)来定义响应式状态。ref
用于创建单个值的响应式引用,reactive
用于创建对象的响应式引用。
2. 使用计算属性
可以在 setup()
函数中定义计算属性,使用 computed
函数来实现。
3. 声明方法
可以在 setup()
函数中定义方法,作为普通的 JavaScript 函数来声明,并在返回对象中公开这些方法。
4. 使用生命周期钩子
在 setup()
函数中,可以使用 Vue 提供的生命周期钩子函数来处理组件生命周期事件。
5. 使用依赖注入和提供
在 setup()
函数中,可以使用 provide
和 inject
API 来实现依赖注入。
import { provide, inject, ref } from 'vue';
6. 组合逻辑
通过 setup()
函数,可以将逻辑组织成可复用的函数,这些函数可以在多个组件中共享。这种方法被称为“组合函数”(Composition Functions)。
总结
setup()
函数在 Vue 3 中具有以下主要用途:
- 定义响应式状态(使用
ref
和reactive
) - 使用计算属性(使用
computed
) - 声明方法
- 使用生命周期钩子(如
onMounted
、onUnmounted
) - 使用依赖注入和提供(
provide
和inject
) - 组合逻辑(创建可复用的组合函数)
通过 setup()
函数,开发者可以更灵活地组织和复用逻辑,增强代码的可读性和维护性。