Vue高階組件的使用方法

本文主要介紹了探索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 幫你完成，即淺比較。

再後來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 這兩個哥們兒不也是這樣嗎

以上是Vue高階組件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！