Vue 3中setup()函数有什么用途？

个人博客

在 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() 函数，开发者可以更灵活地组织和复用逻辑，增强代码的可读性和维护性。