Vue 3 中 HOC 是接收组件并返回新组件的函数，新组件需在 setup 中定义逻辑、在 render 中构造 vnode，setup 不直接返回 render 函数而是供其读取状态。
Vuejs
Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v
下载
<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>
<ul>
<li>定义一个 HOC 函数（例如 withLoading、withAuth）</li>
<li>该函数内部返回一个新组件，其中 setup 提供逻辑（如 ref、computed、onMounted），render 函数利用 setup 返回的值完成渲染</li>
<li>render 函数必须显式声明在组件配置中，不能“从 setup return 出来”——setup 的返回值只用于模板编译或被 render 函数读取</li>
</ul>
<H3>正确写法：HOC 返回含 setup 和 render 的组件配置</H3>
<p>以下是一个带 loading 状态的简单 HOC 示例：</p>
<font color="#666">
<pre>
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'
})
}
}
})
}
</pre>
</font>
<p>⚠️ 注意：上面用的是 setup() 返回函数（即 <strong>setup 返回渲染函数</strong>），这是 Vue 3 支持的简写语法，等价于配置 render 选项。但更清晰、推荐的方式是显式写 render：</p>
<font color="#666">
<pre>
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)
}
})
}
</pre>
</font>
<H3>关键细节：如何正确透传 slots / attrs / emit</H3>
<p>在 render 函数中渲染被包装组件时，必须手动透传：</p>
<ul>
<li><strong>attrs</strong>：用 <code>this.$attrs</code> 或 setup 解构出的 <code>attrs</code> 对象</li>
<li><strong>slots</strong>：用 <code>this.$slots</code> 或 setup 解构出的 <code>slots</code></li>
<li><strong>props</strong>：若 WrappedComponent 声明了 props，需确保当前组件也定义并透传（或用 <code>...this.$props</code>）</li>
<li><strong>ref/emits</strong>：如需暴露子组件 ref 或事件，需用 <code>expose</code> + <code>defineExpose</code> 显式控制</li>
</ul>
<H3>进阶：支持泛型与类型推导（TypeScript）</H3>
<p>为保持类型安全，可这样定义 HOC：</p>
<font color="#666">
<pre>
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 // 类型可进一步精修，此处简化
}
</pre>
</font>
<p>实际项目中建议配合 <code>defineComponent</code> 的泛型和 <code>ExtractPropTypes</code> 做完整类型继承，但核心逻辑不变：HOC 是函数，返回新组件；新组件内 setup 负责逻辑，render 负责基于逻辑的 vnode 构造。</p>
