vue 中 setup 函数的作用是：初始化组件状态和逻辑，包括定义响应式数据、方法和生命周期钩子。替代 options api 中的 data()、methods()、computed() 和 watch() 等选项。通过响应式性处理提供更好的性能。支持 composition api，用于共享和重用逻辑。提高可测试性，因为逻辑与模板代码分离。
Vue 中 setup 的作用
Vue.js 3 中引入的 setup 函数是一个钩子函数，它在组件的生命周期中被调用，用于初始化组件。它主要有以下作用：
1. 初始化组件状态和逻辑
在 setup 函数中，可以定义组件的状态（即响应式数据）和方法，以及生命周期钩子。这些状态和逻辑将在整个组件生命周期中使用。
立即学习“前端免费学习笔记（深入）”；
2. 替代 options API
setup 函数可以替代 Vue.js 2 中的 options API 中的 data()、methods()、computed() 和 watch() 等选项。它提供了一种更统一和简洁的方式来定义组件逻辑。
3. 提供更好的性能
setup 函数的响应式性处理方式比 options API 更高效，因为它只计算变化的部分，从而提高了性能。
4. 支持Composition API
setup 函数允许使用 Composition API，这是一种在组件之间共享和重用逻辑的新方法。可以通过使用 provide() 和 inject() 函数来实现。
5. 高可测试性
setup 函数中的逻辑与模板代码分离，使其更易于测试。测试可以仅针对 setup 函数中定义的逻辑，而无需与模板交互。
示例
<code class="javascript">import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => count.value++;
return {
count,
increment,
};
},
};</code>在这个示例中，setup 函数定义了组件的状态（count）和方法（increment），这些状态和方法将在组件模板中使用。
