小试 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 团队，感谢饿了么。希望你们再接再厉，相信将来这套库会更好。

---

同步发于 我的博客