Rumah  >  Artikel  >  hujung hadapan web  >  Vue高阶组件的使用方法

Vue高阶组件的使用方法

小云云
小云云asal
2018-01-09 10:06:223900semak imbas

本文主要介绍了探索Vue高阶组件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

高阶组件( HOC )是 React 生态系统的常用词汇, React 中代码复用的主要方式就是使用高阶组件,并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins ,并且在 Vue 中很少提到高阶组件的概念,这是因为在 Vue 中实现高阶组件并不像 React 中那样简单,原因在于 ReactVue 的设计思想不同,但并不是说在 Vue 中就不能使用高阶组件,只不过在 Vue 中使用高阶组件所带来的收益相对于 mixins 并没有质的变化。本篇文章主要从技术性的角度阐述 Vue 高阶组件的实现,且会从 ReactVue 两者的角度进行分析。

从 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 帮你完成,即浅比较。

再后来 React 为了避免开发者在组件中总是要写这样一段同样的代码,进而推荐使用 React.PureComponent ,总之 React 在一步步的脱离 mixins ,他们认为 mixinsReact 生态系统中并不是一种好的模式(注意:并没有说 mixins 不好,仅仅针对 React 生态系统),观点如下:

1、 mixins 带来了隐式依赖

2、 mixinsmixins 之间, mixins 与组件之间容易导致命名冲突

3、由于 mixins 是侵入式的,它改变了原组件,所以修改 mixins 等于修改原组件,随着需求的增长 mixins 将变得复杂,导致滚雪球的复杂性。

具体大家可以查看这篇文章 Mixins Considered Harmful 。不过 HOC 也并不是银弹,它自然带来了它的问题,其观点是: 使用普通组件配合 render prop 可以做任何 HOC 能做的事情 。

本篇文章不会过多讨论 mixinsHOC 谁好谁坏,就像技术本身就没有好坏之分,只有适合不适合。难道 ReactVue 这俩哥们儿不也是这样吗

Atas ialah kandungan terperinci Vue高阶组件的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn