本文主要介绍了探索vue高阶组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
高阶组件( HOC )是 React 生态系统的常用词汇， React 中代码复用的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins ，并且在 Vue 中很少提到高阶组件的概念，这是因为在 Vue 中实现高阶组件并不像 React 中那样简单，原因在于 React 和 Vue 的设计思想不同，但并不是说在 Vue 中就不能使用高阶组件，只不过在 Vue 中使用高阶组件所带来的收益相对于 mixins 并没有质的变化。本篇文章主要从技术性的角度阐述 Vue 高阶组件的实现，且会从 React 与 Vue 两者的角度进行分析。
从 React 说起
起初 React 也是使用 mixins 来完成代码复用的，比如为了避免组件不必要的重复渲染我们可以在组件中混入 PureRenderMixin ：
const PureRenderMixin = require('react-addons-pure-render-mixin')
const MyComponent = React.createClass({
mixins: [PureRenderMixin]
})后来 React 抛弃了这种方式，进而使用 shallowCompare ：
立即学习“前端免费学习笔记（深入）”；
const shallowCompare = require('react-addons-shallow-compare')
const Button = React.createClass({
shouldComponentUpdate: function(nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
}
})这需要你自己在组件中实现 shouldComponentUpdate 方法，只不过这个方法具体的工作由 shallowCompare 帮你完成，即浅比较。
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
再后来 React 为了避免开发者在组件中总是要写这样一段同样的代码，进而推荐使用 React.PureComponent ，总之 React 在一步步的脱离 mixins ，他们认为 mixins 在 React 生态系统中并不是一种好的模式(注意：并没有说 mixins 不好，仅仅针对 React 生态系统)，观点如下：
1、 mixins 带来了隐式依赖
2、 mixins 与 mixins 之间， mixins 与组件之间容易导致命名冲突
3、由于 mixins 是侵入式的，它改变了原组件，所以修改 mixins 等于修改原组件，随着需求的增长 mixins 将变得复杂，导致滚雪球的复杂性。
具体大家可以查看这篇文章 Mixins Considered Harmful 。不过 HOC 也并不是银弹，它自然带来了它的问题，其观点是： 使用普通组件配合 render prop 可以做任何 HOC 能做的事情 。
本篇文章不会过多讨论 mixins 和 HOC 谁好谁坏，就像技术本身就没有好坏之分，只有适合不适合。难道 React 和 Vue 这俩哥们儿不也是这样吗
