有關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 能做的事情 。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

jQuery實作遞歸無限層功能

JavaScript中如何實作職責鏈模式

使用Ajax和Jquery實作下拉框的二級聯動

有關vue-awesome-swiper外掛問題

vue中如何使用better-scroll外掛程式

jquery如何取得指定的索引值

Vue框架中有關goods元件開發

#在vue中首次使用stylus安裝方法（詳細教學）

express與koa的使用比較（詳細教學）

在vue中線上付費課程（詳細教學）

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