问题：Vue 3 中 setup 函数的作用？答案：初始化组件状态和方法设置生命周期钩子提供注入功能详细描述：Vue 3 中的 setup 函数替代了 created 和 mounted 钩子，用于初始化和配置组件逻辑。它通过使用 reactive() 和 computed() 创建响应式数据和计算属性，设置生命周期钩子，以及在祖先和后代组件之间共享数据，从而简化组件逻辑，更好地组织状态和逻辑，并提升组件性能。
Vue 3 中 setup 函数的作用
Vue 3 中引入了一个新的函数 setup，它取代了生命周期钩子 created 和 mounted，用于初始化和配置组件逻辑。
作用：
setup 函数的主要作用是：
立即学习“前端免费学习笔记（深入）”；
- 初始化组件状态和方法：使用 reactive() 和 computed() 创建响应式数据和计算属性。
- 设置生命周期钩子：在 setup 中设置生命周期钩子，例如 beforeCreate 和 mounted。
- 提供注入功能：使用 provide() 和 inject() 在祖先和后代组件之间共享数据。
优点：
- 简化组件逻辑：将组件初始化和逻辑集中在一个函数中，提高了代码的可读性和可维护性。
- 更好地组织状态和逻辑：通过使用 reactive() 和 computed() 来管理组件状态，可以更清晰地组织和管理组件逻辑。
- 提升组件性能：Vue 优化了 setup 函数的执行，使其比生命周期钩子更快。
使用方式：
在组件定义中，使用 setup 函数替代 created 和 mounted 钩子。语法如下：
<code class="javascript">const component = {
setup() {
// 初始化组件逻辑...
}
}</code>示例：
以下示例展示了如何在 setup 函数中初始化组件状态和方法：
<code class="javascript">const component = {
setup() {
const count = reactive(0)
const increment = () => {
count.value++
}
return {
count,
increment
}
}
}</code> 
