Vue 3 中的 setup 函数是一个新的组件选项，用于使用组合式 API 定义组件的逻辑。这个函数的引入是为了解决 Vue 2 中随着组件复杂度的增长，选项式的 API 可能导致代码难以维护和理解的问题。通过 setup 函数，开发者可以更加灵活地组织和共享代码逻辑，提高代码的可读性和可维护性。
setup 函数的工作原理
-
执行时机：
setup函数是组件生命周期中最早执行的函数，它在beforeCreate和created生命周期钩子之前调用。这意味着在setup函数内部，你无法访问到组件的实例（this），因为此时组件实例还没有完全创建。 -
参数：
setup函数接收两个参数：props和context。props是组件接收的属性，它是一个响应式对象，你可以在setup函数内部访问和修改它（但通常不建议直接修改 props）。context是一个包含了组件的上下文信息的对象，它提供了如attrs、slots、emit等属性的访问。 -
返回值：
setup函数应该返回一个对象，这个对象中的属性和方法将被暴露给组件的模板和其他组合式 API 函数。返回的对象可以包含响应式数据、计算属性、方法、侦听器等。 -
响应式系统：在
setup函数内部，你可以使用 Vue 3 的响应式 API（如reactive、ref、computed等）来创建和管理响应式数据。这些数据在组件更新时将自动更新，无需手动触发更新。 -
组合逻辑：通过使用
setup函数，你可以将相关的逻辑代码组织在一起，形成一个可复用的函数（也称为 “composition function”）。这些函数可以接收参数并返回响应式数据和方法，从而在不同的组件之间共享和重用逻辑。 -
与模板的交互：在
setup函数中定义的响应式数据和方法可以通过模板中的插值表达式、指令和事件处理器等方式与模板进行交互。这使得开发者可以更加直观地管理组件的状态和行为。 -
与其他选项的交互：虽然
setup函数是组合式 API 的核心部分，但它并不完全替代了 Vue 2 中的选项式 API。例如，你仍然可以在组件中使用methods、computed、data等选项，但这些选项将与setup函数中定义的逻辑相互独立。通常建议在使用组合式 API 时，将尽可能多的逻辑放在setup函数中处理。
示例代码
下面是一个简单的 Vue 3 组件示例，展示了如何使用 setup 函数：
vue复制代码
<template> | |
<div> | |
<p>{{ count }}</p> | |
<button @click="increment">Increment</button> | |
</div> | |
</template> | |
<script> | |
import { ref } from 'vue'; | |
export default { | |
setup() { | |
const count = ref(0); // 创建一个响应式引用，初始值为 0 | |
function increment() { | |
count.value++; // 修改响应式引用的值 | |
} | |
// 暴露给模板的响应式数据和方法 | |
return { | |
count, | |
increment, | |
}; | |
}, | |
}; | |
</script> |
在这个示例中，setup 函数创建了一个名为 count 的响应式引用和一个名为 increment 的方法。这些方法通过返回的对象暴露给模板，使得模板可以访问和响应这些数据和方法。当点击按钮时，increment 方法被调用，从而更新 count 的值，并触发组件的重新渲染。
