Vue 3的setup函数怎么用？

setup函数是Vue 3组合式API的入口和核心。它在组件实例被创建之前执行，此时组件的props已解析，但尚未处理其他选项（如data、methods）。它的主要职责是定义响应式状态、计算属性、方法，并返回一个对象，该对象的所有属性都可以在模板中直接使用。

setup函数的基本结构

setup函数接收两个参数：props和context。它返回一个对象，这个对象的属性和方法会暴露给模板和其他选项式API（如果有的话）。

<script>
import { ref } from 'vue';
export default {
  props: ['title'],
  setup(props, context) {
    // 响应式状态
    const count = ref(0);
    // 方法
    function increment() {
      count.value++;
    }
    // 返回给模板使用
    return {
      count,
      increment
    };
  }
}
</script>
<template>
  <h1>{{ title }}</h1>
  <button @click="increment">{{ count }}</button>
</template>

props是响应式的，你不能使用ES6解构它，否则会失去响应性。如果需要解构，可以使用toRefs。context是一个普通对象，包含了attrs、slots、emit等属性。

使用响应式API

在setup内部，你使用从vue导入的函数来创建响应式数据。ref用于基本类型，reactive用于对象，computed用于计算属性，watch和watchEffect用于侦听。

import { ref, reactive, computed, watch } from 'vue';
export default {
  setup() {
    const num = ref(0);
    const state = reactive({ name: 'Vue' });
    const double = computed(() => num.value * 2);
    watch(num, (newVal) => { console.log(newVal); });
    return { num, state, double };
  }
}

使用<script setup>语法糖

为了更简洁，Vue 3提供了<script setup>语法糖。它是在单文件组件中使用组合式API的编译时语法。在<script setup>中声明的顶层变量、函数以及import导入的内容，都会自动暴露给模板。

<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0);
const increment = () => { count.value++ };
onMounted(() => { console.log('组件挂载了') });
// 无需显式返回
</script>
<template>
  <button @click="increment">{{ count }}</button>
</template>

这大幅减少了样板代码，是当前最推荐的写法。它完全等效于普通的setup函数，但更简洁。要定义组件选项如props、emits，需使用专门的宏如defineProps、defineEmits。

访问组件实例与生命周期

在setup中，你无法使用this（因为此时组件实例尚未创建）。要访问组件的生命周期，需使用对应的钩子函数（如onMounted、onUpdated），它们也直接从vue导入。

import { onMounted } from 'vue';
setup() {
  onMounted(() => {
    console.log('组件已挂载');
  });
}

要触发自定义事件，使用context.emit（普通setup）或defineEmits宏（<script setup>）。

因此，setup函数或<script setup>是组织组件逻辑的新范式。它将相关逻辑集中在一起，提升了代码的可读性和可维护性，并为逻辑复用提供了坚实的基础。