vue 3 中 hoc 是接收组件并返回新组件的函数，新组件需在 setup 中定义逻辑、在 render 中构造 vnode，setup 不直接返回 render 函数而是供其读取状态。
<p>在 Vue 3 的 Composition API 中，<strong>setup</strong> 函数本身不直接返回渲染函数（render function），而是返回响应式状态、方法或 <strong>setup 返回的对象会被自动合并到组件实例中</strong>；而真正的渲染函数需通过 <strong>defineComponent</strong> 配置的 <strong>render</strong> 选项显式定义。因此，“在 setup 中返回渲染函数的自定义高阶组件”本质上是指：编写一个接收组件、返回新组件的 HOC，并让新组件使用 render 函数进行渲染，且该 render 函数可访问 setup 中定义的逻辑。</p> <h3>理解核心前提：HOC 是函数，不是 setup 内部逻辑</h3> <p>高阶组件（HOC）是一个函数，接收一个组件（如 defineComponent 的结果），返回一个新的组件配置对象（通常含 setup + render）。它本身不在某个 setup 内运行，而是用于封装/增强组件。所以正确路径是：</p>
- 定义一个 HOC 函数（例如 withLoading、withAuth）
- 该函数内部返回一个新组件，其中 setup 提供逻辑（如 ref、computed、onMounted），render 函数利用 setup 返回的值完成渲染
- render 函数必须显式声明在组件配置中，不能“从 setup return 出来”——setup 的返回值只用于模板编译或被 render 函数读取
正确写法：HOC 返回含 setup 和 render 的组件配置
以下是一个带 loading 状态的简单 HOC 示例：
import { defineComponent, ref, onMounted, h } from 'vue'
// 高阶组件：包装目标组件，添加 loading 状态
function withLoading(WrappedComponent) {
return defineComponent({
name: `WithLoading(${WrappedComponent.name || 'Anonymous'})`,
setup() {
const isLoading = ref(true)
onMounted(() => {
// 模拟异步加载完成
setTimeout(() => {
isLoading.value = false
}, 800)
})
// setup 返回的数据可供 render 函数使用
return () => {
if (isLoading.value) {
return h('div', 'Loading...')
}
// 渲染原始组件（注意：需传入 attrs/slots/emit 等上下文）
return h(WrappedComponent, {
...this.$attrs,
ref: 'wrappedRef'
})
}
}
})
}
⚠️ 注意：上面用的是 setup() 返回函数（即 setup 返回渲染函数），这是 Vue 3 支持的简写语法，等价于配置 render 选项。但更清晰、推荐的方式是显式写 render：
function withLoading(WrappedComponent) {
return defineComponent({
setup(props, { attrs, slots, emit }) {
const isLoading = ref(true)
onMounted(() => {
setTimeout(() => isLoading.value = false, 800)
})
// setup 中定义逻辑，render 外部引用
return { isLoading, attrs, slots, emit }
},
render() {
if (this.isLoading) {
return h('div', 'Loading...')
}
return h(WrappedComponent, {
...this.attrs,
...this.$props
}, this.slots)
}
})
}
关键细节：如何正确透传 slots / attrs / emit
在 render 函数中渲染被包装组件时，必须手动透传：
-
attrs：用
this.$attrs或 setup 解构出的attrs对象 -
slots：用
this.$slots或 setup 解构出的slots -
props：若 WrappedComponent 声明了 props，需确保当前组件也定义并透传（或用
...this.$props） -
ref/emits：如需暴露子组件 ref 或事件，需用
expose+defineExpose显式控制
进阶：支持泛型与类型推导（TypeScript）
为保持类型安全，可这样定义 HOC：
import type { Component, DefineComponent, VNode } from 'vue'
function withLoading<t extends definecomponent>(
Component: T
): DefineComponent {
return defineComponent({
setup() {
const isLoading = ref(true)
onMounted(() => setTimeout(() => isLoading.value = false, 500))
return { isLoading }
},
render(this: any) {
return this.isLoading
? h('div', 'Loading...')
: h(Component, this.$props, this.$slots)
}
}) as any // 类型可进一步精修，此处简化
}
</t>
实际项目中建议配合 defineComponent 的泛型和 ExtractPropTypes 做完整类型继承，但核心逻辑不变：HOC 是函数，返回新组件；新组件内 setup 负责逻辑，render 负责基于逻辑的 vnode 构造。
