Vue 3中 setup 函数与 script setup 用法总结

Vue 3 引入了全新的组合式API (Composition API)，以提高代码的可维护性和重用性。其中，setup 函数和 script setup 语法是核心部分。以下是对这两者的详细总结。

一、setup 函数

setup 函数是组合式API的入口点，在组件实例创建之前执行。它允许你使用组合式API来定义组件的逻辑。setup 函数在传统的 <script> 标签中使用。

1. 基本用法

在 Vue 3 组件中，setup 函数接受两个参数：props 和 context。

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'ExampleComponent',
  setup(props, context) {
    const message = ref('Hello, Vue 3!');
    return {
      message
    };
  }
};
</script>

2. 使用 props 和 context

setup 函数的第一个参数是 props，用于访问传递给组件的属性。第二个参数 context 包含 attrs、slots 和 emit。

<template>
  <button @click="emitEvent">{{ label }}</button>
</template>

<script>
export default {
  name: 'ExampleComponent',
  props: {
    label: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const emitEvent = () => {
      emit('myEvent');
    };
    return {
      emitEvent
    };
  }
};
</script>

3. 使用组合式API

在 setup 函数中，可以使用 Vue 提供的组合式API，例如 ref、reactive、computed 等。

<template>
  <div>{{ doubleCount }}</div>
  <button @click="increment">Increment</button>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      doubleCount,
      increment
    };
  }
};
</script>

二、script setup 语法

script setup 是 Vue 3.2 引入的语法糖，旨在简化组合式API的使用。它将 setup 函数的逻辑直接写在 <script setup> 标签中，使代码更加简洁。

1. 基本用法

在 <script setup> 标签中，所有定义的变量和函数自动可用于模板。

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue 3!');
</script>

2. 使用 props 和 emit

通过 defineProps 和 defineEmit 来使用 props 和 emit。

<template>
  <button @click="emitEvent">{{ label }}</button>
</template>

<script setup>
import { defineProps, defineEmit } from 'vue';

const props = defineProps({
  label: {
    type: String,
    required: true
  }
});

const emit = defineEmit();
const emitEvent = () => {
  emit('myEvent');
};
</script>

3. 使用组合式API

在 <script setup> 中，可以直接使用组合式API，无需显式返回。

<template>
  <div>{{ doubleCount }}</div>
  <button @click="increment">Increment</button>
</template>

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const increment = () => {
  count.value++;
};
</script>

三、setup 函数与 script setup 的对比

四、实际应用中的选择

在实际项目中，选择 setup 函数还是 script setup 主要取决于个人偏好和团队规范。script setup 提供了更简洁的语法，适合简单的组件逻辑，而 setup 函数则在复杂的逻辑中提供了更清晰的结构。

总结

Vue 3 提供了 setup 函数和 script setup 语法，使得组合式API的使用更加灵活和简洁。通过合理选择和使用这两种方式，可以提高代码的可维护性和开发效率。

思维导图：Vue 3 Setup 函数与 Script Setup

graph TD;
    A[Vue 3 Setup 函数与 Script Setup] --> B[setup 函数]
    A --> C[script setup]
    B --> D[基本用法]
    B --> E[使用 props 和 context]
    B --> F[使用组合式API]
    C --> G[基本用法]
    C --> H[使用 props 和 emit]
    C --> I[使用组合式API]
    A --> J[对比]
    A --> K[实际应用中的选择]
    A --> L[总结]

通过这一总结，您可以更清晰地理解和运用 Vue 3 中的 setup 函数和 script setup 语法，以更好地构建和维护 Vue 组件。