当前位置:
首页
文章
前端
详情

Vue 进阶必学之高阶组件 HOC

高阶组件这个概念在 React 中一度非常流行,但是在 Vue 的社区里讨论的不多,本篇文章就真正的带你来玩一个进阶的骚操作。

先和大家说好,本篇文章的核心是学会这样的思想,也就是 容器木偶 组件的解耦合,这可以有很多方式,比如 slot-scopes,比如未来的composition-api。本篇所写的代码也不推荐用到生产环境,生产环境有更成熟的库去使用,这篇强调的是 思想,顺便把 React 社区的玩法移植过来皮一下。

不要喷我,不要喷我,不要喷我,此篇只为演示高阶组件的思路,如果实际业务中想要简化文中所提到的异步状态管理,请使用基于 slot-scopes 的开源库 vue-promised

另外标题中提到的 20k 其实有点标题党,我更多的想表达的是我们要有这样的精神,只会这一个技巧肯定不能让你达到 20k。但我相信只要大家有这样钻研高级用法,不断优化业务代码,不断提效的的精神,我们总会达到的,而且这一天不会很远。

例子

本文就以平常开发中最常见的需求,也就是异步数据的请求为例,先来个普通玩家的写法:

`