Vue 3中的setup【与Vue 2的区别】

一、前言

• 在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); // 访问propsemit('update'); // 触发事件
}

3.替代生命周期钩子

• 通过onMounted、onUpdated等函数直接注册生命周期逻辑。

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

4.逻辑复用与组织

• 将相关逻辑封装为自定义Hook（如useFetch），实现高内聚、低耦合。

// 自定义Hook
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"语法以简化开发。