传统的setup函数写：

这是最基础的写法，需要在setup函数中定义响应式数据和方法，并通过return将这些数据和方法暴露给模板。例如：

import { ref } from 'vue';
export default {
  setup() {
    // 创建一个初始值为0的响应式数据
    const count = ref(0);
    console.log(count.value); // 输出：0
    // 修改响应式数据的值
    count.value = 10;
    console.log(count.value); // 输出：10
    // 定义一个方法来增加count的值
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
}

ml-search[script setup]语法：

这是Vue 3.2引入的新特性，旨在进一步简化代码。在<script setup>标签中，你可以直接声明变量和方法，无需通过setup函数返回。例如：

<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

使用<script setup>可以显著减少代码量，并且使得代码更加简洁和易于阅读。

结合:ml-search[reactive]和toRefs使用：

这种方式适用于更复杂的场景，可以通过reactive创建响应式对象，并通过toRefs将其转换为可访问的属性。例如：

import { reactive, toRefs } from 'vue';
export default {
  setup() {
    const state = reactive({ count: 0 });
    const { count } = t increment };
  }
}

Setup 上下文

传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值：

import { computed, reactive, ref, onMounted, watch } from 'vue'
export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)
    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)
    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)
    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}

该上下文对象是非响应式的，可以安全地解构：

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrs 和 slots 都是有状态的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。此外还需注意，和 props 不同，attrs 和 slots 的属性都不是响应式的。如果你想要基于 attrs 或 slots 的改变来执行副作用，那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

参考：

https://blog.csdn.net/fuhanghang/article/details/140316762