Vue 3源码深度解析之:`Vue`的`HOC`(高阶组件)与`Composition API`的对比。

各位靓仔靓女,晚上好!今天咱们聊点Vue 3里面比较有意思的东西:高阶组件(HOC)和 Composition API,顺便看看它们之间的爱恨情仇。 开场白:什么是“高阶”? 先别被“高阶”这两个字吓到,其实它没那么玄乎。 就像高等数学,无非就是微积分再深入一点嘛(手动狗头)。在编程世界里,“高阶”一般指的是可以操作其他函数或者组件的函数或者组件。 高阶函数: 接收一个或多个函数作为参数,或者返回一个函数的函数。 高阶组件: 接收一个组件作为参数,返回一个新的、增强后的组件的组件。 今天咱们重点聊高阶组件,顺便拿它和 Composition API 对比一下,看看各自的优缺点。 第一幕:高阶组件(HOC)的前世今生 在Vue 2时代,HOC可是代码复用的一大利器。 想象一下,你需要给很多组件都加上一样的功能,比如登录验证、权限控制、日志记录等等。 如果每个组件都写一遍,那代码岂不是要爆炸? HOC就是来拯救你的。 HOC的本质:一个函数,包装组件,返回新组件 本质上,HOC就是一个函数,它接收一个组件作为参数,然后返回一个新的、增强后的组件。 这个新组件通常会在原有组件的基础上,添加一 …