---

前言

setup 选项是 Vue 3 中最重要的部分之一，允许在组件中使用逻辑复用和组合，取代了 Vue 2.x 中的 Options API 和 Mixins。

---

一、什么是 setup 选项？

在 Vue 3 中，每个组件都可以包含一个 setup 函数，这个函数会在组件实例被创建之前执行。setup 函数接收两个参数：props 和 context。其中，props 是组件的属性对象，而 context 包含了一些与组件实例相关的信息，比如 attrs、slots 等。

setup 函数的返回值可以是一个对象，该对象中包含了组件内部需要使用的响应式数据、计算属性、方法等。这些数据和方法可以被模板直接使用，实现了逻辑的复用和组件的解耦。

---

二、使用步骤

1. 引入 Vue 和 setup 函数

import { defineComponent } from 'vue';export default defineComponent({setup(props, context) {// 在这里编写逻辑}
});

2. 编写逻辑

import { ref, computed } from 'vue';export default defineComponent({setup(props, context) {// 响应式数据const count = ref(0);// 计算属性const doubleCount = computed(() => count.value * 2);// 方法const increment = () => {count.value++;};// 返回数据和方法return {count,doubleCount,increment};}
});

3. 在模板中使用

<template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button></div>
</template>

---

三、与 Options API 对比

相比于 Vue 2.x 中的 Options API，setup 提供了更灵活和强大的方式来组织和管理组件的逻辑。

• 逻辑复用：setup 使逻辑可以更容易地进行复用，而不是依赖于 Mixins。
• 更直观：setup 函数的代码更加直观和清晰，易于理解和维护。
• 更好的类型推导：由于 setup 是在编译阶段执行的，可以更好地推导出数据的类型，提高了代码的可读性和健壮性。
• 更好的 TypeScript 支持：setup 可以更好地与 TypeScript 集成，提供了更好的类型推断和错误提示。