一、前言
- 在Vue 3中，setup是组合式API（Composition API）的核心入口函数。
- 其核心作用是为组件提供灵活的逻辑组织方式，解决复杂组件中逻辑碎片化的问题。
二、核心作用
1.初始化响应式数据
- 通过ref和reactive等API声明响应式状态，替代Vue 2的data选项。
- 示例：
setup() {const count = ref(0); const user = reactive({ name: "张三" }); return { count, user };
}
2.访问组件的Props和上下文
- props参数：接收父组件传递的响应式属性，不可直接解构（需用toRefs保持响应性）。
- context参数：提供非响应式的上下文对象，包含attrs、slots、emit和expose。
setup(props, { attrs, emit }) {console.log(props.title); emit('update');
}
3.替代生命周期钩子
- 通过onMounted、onUpdated等函数直接注册生命周期逻辑。
setup() {onMounted(() => {console.log('组件已挂载');});
}
4.逻辑复用与组织
- 将相关逻辑封装为自定义Hook（如useFetch），实现高内聚、低耦合。
function useFetch(url) {const data = ref(null);onMounted(async () => {data.value = await fetch(url).then(r => r.json());});return { data };
}
5.暴露变量与方法
- 返回的对象会暴露给模板和组件实例，其他选项（如methods）可通过this访问这些值。
setup() {const increment = () => count.value++;return { increment };
}
三、"script setup"语法糖
- 在单文件组件中，setup提供更简洁的语法：
- 自动暴露顶层变量：无需手动返回。
- 直接使用TypeScript：支持类型推导。
- 编译优化：模板与逻辑同一作用域，性能更高。
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
</script>
四、注意事项
- this不可用：setup执行时组件实例尚未创建，this为undefined。
- 异步setup：需配合Suspense组件使用，但生产环境慎用。
- 响应式解构：使用toRefs(props)保持解构后的响应性：
const { title } = toRefs(props);
五、与Vue 2选项式API对比
六、总结
- setup是Vue 3组件逻辑的组织核心，通过组合式API解决了复杂组件中代码分散的问题。
- 同时支持更好的TypeScript集成和编译优化。
- 对于新项目，推荐优先使用"script setup"语法以简化开发。
