如何通过HOC模式在Vue中实现组件的高阶抽象？

本文共计1962个文字，预计阅读时间需要8分钟。

前言：HOC是React常用的一种模式，但HOC只在React才能玩转吗？先来看看React官方文档是如何介绍HOC的：

高级组件（HOC）：高级组件（HOC）是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分，而是组件的一种封装方式。

HOC允许你重用组件逻辑，而无需创建多个组件。它将组件包装在另一个组件中（即高级组件），并返回一个新的组件。这个新组件可以访问包装组件的props，并在返回的组件中复用或修改这些props。

前言

HOC是React常用的一种模式，但HOC只能是在React才能玩吗？先来看看React官方文档是怎么介绍HOC的：

高阶组件（HOC）是React中用于复用组件逻辑的一种高级技巧。HOC自身不是ReactAPI的一部分，它是一种基于React的组合特性而形成的设计模式。

HOC它是一个模式，是一种思想，并不是只能在React中才能用。所以结合Vue的特性，一样能在Vue中玩HOC。

HOC

HOC要解决的问题

并不是说哪种技术新颖，就得使用哪一种。得看这种技术能够解决哪些痛点。

HOC主要解决的是可复用性的问题。在Vue中，这种问题一般是用Mixin解决的。Mixin是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上去。