开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
你想了解 Vue 中
setup 函数的核心作用、参数构成和返回值规则，这是理解 Vue 3 组合式 API 的关键知识点。一、setup 函数的核心作用
setup 是 Vue 3 组合式 API 的入口函数，替代了 Vue 2 中的 data、methods、computed 等选项式写法，主要作用有：- 作为组件逻辑的「统一入口」，集中编写数据定义、方法、生命周期逻辑等；
- 在组件实例创建前执行（早于
beforeCreate钩子），是组合式 API 的执行上下文； - 实现逻辑复用：可以将组件逻辑抽离成独立函数，在
setup中调用，解决 Vue 2 混合（mixins）的命名冲突、来源不清晰等问题； - 完全脱离
this指向（setup内this为undefined），避免了选项式 API 中this指向不明确的问题。
二、setup 函数的参数
setup 接收两个固定参数，均为可选：1. 第一个参数：props（组件接收的属性）
- 类型：对象，包含父组件传递且在
props选项中声明的属性； - 特性：
- 是「响应式」的，当父组件传递的属性变化时，
props会自动更新； - 不能直接解构（解构会丢失响应式），如需解构需用
toRefs/toRef处理； - 遵循 Vue 的单向数据流，不能直接修改
props中的值。
- 是「响应式」的，当父组件传递的属性变化时，
示例：
vue
<template>
<div>{{ title }}</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
props: {
title: {
type: String,
required: true
}
},
setup(props) {
// 解构 props 并保留响应式
const { title } = toRefs(props)
console.log(title.value) // 访问需加 .value（Ref 特性）
return { title }
}
}
</script>
2. 第二个参数：context（上下文对象）
- 类型：普通对象（非响应式），包含组件的核心上下文信息，解构不会丢失特性；
- 核心属性：
attrs：非响应式对象，包含父组件传递但未在props中声明的属性（对应 Vue 2 的$attrs）；slots：非响应式对象，包含组件的插槽内容（对应 Vue 2 的$slots）；emit：函数，用于触发自定义事件（对应 Vue 2 的$emit）；expose：函数，用于显式暴露组件内部的属性 / 方法（供父组件通过 ref 访问）。
示例：
vue
<template>
<button @click="handleClick">点击触发事件</button>
</template>
<script>
export default {
setup(props, { emit, attrs, slots }) {
// 访问未声明的 props 属性
console.log(attrs.class)
// 触发自定义事件
const handleClick = () => {
emit('custom-click', '参数')
}
return { handleClick }
}
}
</script>
三、setup 函数的返回值
setup 的返回值决定了模板中能访问的变量 / 方法，主要有两种情况：1. 返回「普通对象」（最常用）
- 作用：对象中的属性 / 方法会被暴露到模板中，模板可直接使用；
- 注意：
- 如果返回的是 Ref 类型（如
ref(0)），模板中访问时无需加.value，Vue 会自动解包； - Reactive 类型（如
reactive({})）可直接返回，模板中直接访问属性。
- 如果返回的是 Ref 类型（如
示例：
vue
<template>
<div>{{ count }}</div>
<button @click="addCount">+1</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const addCount = () => {
count.value++
}
// 返回对象，模板可访问 count 和 addCount
return { count, addCount }
}
}
</script>
2. 返回「渲染函数」
- 作用：替代模板，直接通过 JS 编写渲染逻辑；
- 场景：适合动态生成 DOM 结构的复杂场景。
示例：
vue
<script>
import { h, ref } from 'vue'
export default {
setup() {
const count = ref(0)
const addCount = () => count.value++
// 返回渲染函数，替代 template 模板
return () => h('div', [
h('p', `计数：${count.value}`),
h('button', { onClick: addCount }, '+1')
])
}
}
</script>
特殊说明：
setup不建议返回Promise（虽然 Vue 支持，但需配合 Suspense 组件，且模板无法访问异步数据）；- 如果使用
<script setup>语法糖，无需手动返回 —— 变量 / 方法会自动暴露到模板，本质是 Vue 编译时自动处理了返回逻辑。
总结
- 核心作用：Vue 3 组合式 API 的入口，集中编写组件逻辑，替代选项式 API，支持逻辑复用；
- 参数：
props（响应式，组件接收的属性）和context（非响应式，包含 attrs/slots/emit 等上下文）； - 返回值：主要返回普通对象（供模板访问变量 / 方法），也可返回渲染函数（替代模板），
<script setup>语法糖无需手动返回。
