vue中的hoc是一个接收组件并返回增强组件的函数，不修改原组件，而是通过包装注入逻辑、状态或ui结构，适用于权限控制、加载态等批量增强场景。
Vue 中没有原生的高阶组件（HOC）语法，但可以通过函数式组件 + render 函数灵活模拟出 HOC 的行为——它不是语法糖，而是一种组合策略：用函数封装通用逻辑，再把目标组件“包一层”，注入 props、状态或生命周期行为。
什么是 Vue 里的 HOC
它本质上是一个接收组件（选项对象或函数式组件）并返回新组件的函数。不修改原组件，只做增强：比如加 loading 状态、自动绑定权限校验、注入路由信息、统一错误边界等。
关键点：
- 返回的是标准 Vue 组件定义（可含 name、props、data、methods、render 等）
- 被包装组件（WrappedComponent）通常通过 components 选项注册或直接在 render 中调用
- props 需显式透传，也可叠加新 prop（如 hocId、hocReady）
- 生命周期钩子写在 HOC 内部，对原组件无侵入
Render Function 是 HOC 的核心支撑
template 无法动态决定渲染结构或精细控制 vnode，而 render 函数能直接操作虚拟节点，让 HOC 真正“可控”。例如：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章