setup 函数在 Vue 3 中的作用是什么？什么时候会执行

---

前言

setup() 函数是 Vue 3 中 Composition API 的核心入口，它在组件生命周期中扮演了非常关键的角色。

---

✅ 一、setup() 函数的作用是什么？

setup() 是在组件创建之前执行的一个初始化函数，用来：

功能类别	作用简述
响应式状态声明	创建 ref、reactive 等响应式变量
逻辑封装	封装业务逻辑为函数（或导入 composables）
生命周期注册	使用 onMounted、onUnmounted 等注册生命周期逻辑
计算属性	使用 computed() 定义依赖状态的衍生值
props & emit	接收组件的 props，并通过 emit 触发自定义事件
返回模板绑定对象	返回的数据/方法可以直接在模板 <template> 中使用

---

✅ 二、setup() 什么时候执行？

setup() 会在 组件初始化 时（比 created 更早）执行 一次，并且只执行一次。

执行顺序如下：

beforeCreate -> setup() -> created -> beforeMount -> mounted

⚠️ 注意：在 setup() 中不能访问 this，因为组件实例还未创建完成。

---

✅ 三、setup() 的参数

setup(props, context) {// props 是只读的响应式对象// context 包含三个属性：attrs、slots、emit
}

参数	类型	说明
props	响应式	传入组件的 props，不能解构（会失去响应式）
context	普通对象	包含 attrs（非 props）、slots、emit 等辅助项

---

✅ 四、setup() 中不能做什么？

• ❌ 不能访问 this，因为组件实例还没创建。
• ❌ 不能使用 data、methods、computed（Options API 的写法）。
• ❌ 不建议直接修改 props（它是只读响应式的）。

---

✅ 五、常见用法示例

import { defineComponent, ref, onMounted } from 'vue'export default defineComponent({props: {title: String},setup(props, { emit }) {const count = ref(0)const increment = () => {count.value++emit('update', count.value)}onMounted(() => {console.log('组件挂载', props.title)})return { count, increment }}
})

---

✅ 六、总结（适合背诵或面试回答）

setup() 是 Vue 3 中组件逻辑的统一入口，在组件创建前执行，用于定义响应式状态、逻辑封装、生命周期注册、事件触发等，是 Composition API 的核心支点。

---

<script setup> 是 Vue 3.2+ 推出的语法糖

是对 setup() 函数的简化写法，专为提高开发效率和代码可读性而设计。

---

✅ 一句话总结：

<script setup> 就是把 setup() 函数**“自动内联展开”，省略 defineComponent()、return {} 等冗余写法，让你写的每一行代码自动在 setup 环境中执行**。

---

✅ 二、它能干什么？

等价于你自己手写的：

export default defineComponent({setup() {// ...return {}}
})

变成了这样👇：

<script setup>
import { ref } from 'vue'const count = ref(0)
function increment() {count.value++
}
</script><template><button @click="increment">{{ count }}</button>
</template>

---

✅ 三、核心特性与优势

特性	说明
自动注册为 setup()	所有代码都是在 setup() 中执行的，不用再写 setup() 函数
不需要 return	所有声明的变量/函数，自动暴露给模板 <template> 使用
支持宏命令	提供 <script setup> 独有指令：defineProps()、defineEmits() 等
更少的样板代码	不需要写 import { defineComponent }、setup(), return {} 等
更强的类型推导	更好配合 TypeScript 使用

---

✅ 四、与 defineComponent + setup() 对比

对比项	<script setup>	defineComponent + setup()
写法简洁性	✅ 更简洁、无样板代码	❌ 模板多
模板中变量自动暴露	✅ 自动暴露，无需 return	❌ 需要手动 return
TypeScript 类型推导	✅ IDE 更智能	✅ 支持但稍显繁琐
可读性	✅ 更易读	❌ 模板化程度高
灵活性（命名组件）	❌ 不支持写 name 字段（需额外用 defineOptions）	✅ 可以显式命名

---

✅ 五、defineProps 和 defineEmits 示例

<script setup lang="ts">
const props = defineProps<{ title: string }>()
const emit = defineEmits<{(e: 'update', value: number): void
}>()function click() {emit('update', 42)
}
</script>

---

✅ 六、何时应该用 <script setup>？

场景	是否推荐用 <script setup>
Vue 3 + TypeScript 项目	✅ 强烈推荐
单文件组件 + 简洁逻辑	✅ 更高效
组件逻辑复杂，需要分离	✅ 可以拆分成 composables
需要用 JSX	❌ 不支持 <script setup> JSX
迁移自 Vue 2	✅ 可逐步迁移简化

---

🧠 面试总结推荐回答

<script setup> 是 Vue 3.2 引入的 SFC 编译器语法糖，本质上是 setup 函数的展开，去掉了样板代码、提高了开发效率，自动暴露变量给模板、支持 defineProps/Emits，特别适合 TypeScript 项目与组合式逻辑拆分。

---