【Vue3 组合式 API – setup 选项详解】

前言

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 集成，提供了更好的类型推断和错误提示。