Vue中如何用HOC模式改写长尾词组件？

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

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

高级组件（HOC）：高级组件（Higher-Order Components）是React中用于复用组件逻辑的一种高级技术。

HOC自身并不是React API的一部分。它是一种模式，用于在React中封装以参数形式传入的组件，并返回一个包装组件。这种模式可以让组件重用逻辑而不是代码。

前言

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

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

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

HOC

HOC要解决的问题

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

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

最初React也是使用Mixin的，但是后面发现Mixin在React中并不是一种好的模式，它有以下的缺点：

• mixin与组件之间容易导致命名冲突
• mixin是侵入式的，改变了原组件，复杂性大大提高。