如何在Vue项目中使用HOC模式-创新互联

这篇文章将为大家详细讲解有关如何在Vue项目中使用HOC模式，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

前言

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是侵入式的，改变了原组件，复杂性大大提高。

所以React就慢慢的脱离了mixin，从而推荐使用HOC。并不是mixin不优秀，只是mixin不适合React。

HOC是什么

HOC全称：high-order component--也就是高阶组件。具体而言，高阶组件是参数为组件，返回值为新组件的函数。

而在React和Vue中组件就是函数，所以的高阶组件其实就是高阶函数，也就是返回一个函数的函数。

来看看HOC在React的用法：

function withComponent(WrappedComponent) {
  return class extends Component {
    componentDidMount () {
      console.log('已经挂载完成')
    }
    render() {
      return ;
    }
  }
}