小試 Element UI

不肯定寫多長，寫先結論吧：暫時不推薦使用。緣由以下：

1. 影響使用的小 Bug 有點多

2. 須要從新學習一門語言

---

接下來詳述。

從前司離職以後，我開始更新技術棧。離開慣用的 Backbone，考慮再三，投入 Vue 懷抱。選擇 Vue，而不是競品 Angular、React，有三個理由：

1. 文檔友好，社區活躍。

2. 模塊拆分的很好，學習曲線平緩。

3. 基於標準化技術，能夠最大限度的避免浪費。

不過實操以後發現，Vue 與我慣用的 Bootstrap 有些衝突，主要在於：

1. Bootstrap 對過渡效果和切換的操做依賴於樣式，好比 .active、.in。Vue 在處理模板時會把當前樣式先緩存起來，而後根據數據增刪綁定的樣式。此時就可能出問題，tab 頁切不動或者動畫忽然打斷之類的。

2. Bootstrap 會廣播特定的事件，這些事件沒法被 Vue 捕獲，只能在 mounted() 的鉤子裏手工綁定。

因而我以爲，既然根基（jQuery）變了，最好把整條線都更新了吧。左右看了看，準備先試下 Element UI。這是餓了麼推出的基於 Vue2.0 的組件庫，目測組件齊全，文檔詳細，並且直接以 2.0 爲基礎，符合我追新的想法。

實際用了以後……唉……有點……遺憾。項目地址。

首先，Element UI 把全部組件都封裝了，包括佈局，好比 <el-row>、<el-col>，我以爲這樣太過了。從現實經驗來看，佈局元素幾乎不可可以用，別人總要補充一些。封裝的元素我不太知道最終生成的代碼是什麼樣的，也就很差操做，總不能審查元素一個一個看吧？——對了，Element 的文檔裏缺乏樣式列表，也是個問題。

封裝的另外一個問題，全部元素都要經過後期渲染，總讓我感受不舒服。以及，我幾乎不管幹什麼都要查文檔，幾乎無法直接動手，這和我選擇 Vue 的初衷是相違背的。

接下來，小 Bug，有點多。除去佈局和提示之類，我只用到3個組件：<el-button>、<el-table>、<el-pagination>，結果就遇到4個 bug，浪費不少時間去調試，有兩個我給他們開了 issue，還有兩個懶得弄了。這裏列一下吧：

1. <el-button :loading="scope.row.fetching"> 沒法把 loading 綁定到數據的 .fetching 屬性上

2. <el-pagination> 設置 total 不更新視圖

3. <el-pagination> 更新 total 以後再次廣播 current-change 事件，致使重複刷新

4. <el-table> 裏每行的 ref 屬性無法正確生成數組

可能別的組件很健壯吧，我運氣很差。

總之，我以爲就目前這個版本，1.2.5，來看，Element UI 還沒到讓人放心用而且用得好的程度。

下一次我可能會選別家的再試下，或者繼續用 Bootstrap 而後本身拼些小組件出來——我此次就是想找個有 loading 的 button 才找 UI 庫的。

---

啊，最後，仍是感謝 Element UI 團隊，感謝餓了麼。但願大家再接再礪，相信未來這套庫會更好。

---

同步發於 個人博客