从去年年底开始接触VUE，到现在已经整整一年了。这也是我接触的第一个MVVM的框架。在这之前，我也是长期执迷于JQ大法，在项目中尝试过一些常见的UI框架:

• MiniUI 这是一个很好用的框架，可惜收费较贵，排除这一点，肯定是JQ时代的首选
• EasyUI 用过一次，复杂的API设计让我败下阵来
• Bootstrap 上手快，文档详细，但交互上太弱
• LayUI 近几年新出来的框架，功能丰富，接口简洁，很值得一试

在用JQ的时候，一些功能实在难以找到适合项目，或者说是适合自己的，就自己造轮子，比如

• TinySelect 一个下拉选择组件，用以代替系统的 select 标签
• TinyForm 一个表单工具，用以读写以及校验表单数据

在使用VUE一段时间后，就停止了这两个项目的维护，哈哈。

在前两年，VUE突然火起来后，我也向项目组长提了建议，希望能够尝试在项目上使用一下。公司主要是做内部系统（可以说完全是SPA的系统），在经过一番评估后，就踏上了VUE的旅程。

从概念上来说，东西挺多的：组件，混入，生命周期(包括钩子)，路由，存储，事件，指令，计算属性，注入，过滤器，等一大堆。刚开始接触的时候，也被这些弄得脑壳昏，有点摸不着头脑，随着慢慢使用，对框架的设计与结构有一些了解后，理解也越来越深了。

到现在，用VUE已经写了差不多5个项目，总体来说，感觉是很好的。这一年来，享受到了此框架的不少便利性。

优点

优点上，要我来详细说出个一二三来，我也说不出来，只能从一个主观的感受上来谈。

• vue-cli 提供了十分便捷的上手体验，以至于到现在，我仍然不会手动配置环境
• 从繁琐的HTML编写/DOM操作中解脱出来，更多地从业务上去写代码
• 代码热更新，保存即可查看更改结果
• vue提供的开发插件，可以在浏览器上实时审查组件以及数据
• 能够使用ES6以及ES-NEXT的特性，开发速度感觉能快一些，利益于async/await语法，代码逻辑也更清晰
• 组件/混入/指令/过滤器 的使用，使功能的重用更加方便
• WEBPACK的加持，可以直接使用预编译样式，加载第三方依赖(NPM提供了太多东西)
• Vue事件总线加VUEX以及注入功能，使得在不同页面间传递事件与数据十分灵活

坑

当然，踩坑是无法避免的，也说说吧。

第三方UI框架的话，开发期间一直使用 ElementUI，从体验上来说还是很不错的。但是有个问题，我们系统上有很多需要分页的表格，而 ElementUI 的表格与分页并不能简单衔接，于是将 table 与 pagination 封装在了一起，形成了一个新的组件 eltable-wrapper，以实现表格分页的开箱即用。

在使用echarts图表的时候，最开始是在npm上找的第三方的封装组件，使用后发现，一些配置未被封装，或者一些属性名称或意义被改变了，查阅文档不是那么方便。

突然有一天，发现我们的系统中有很多的 dialog，业务需要，难以避免，由此萌生出了寻找侧滑组件在想法。找了一阵，有几个现成的，但是用起来感觉都不够灵活，于是，只能开始自己造轮子，vue-slideout。

尽管MVVM很强大，但是在一些特殊的场景下，仍然是需要操作DOM的，此时必须注意生命周期，一不小心组件还没有挂载，或者是已经销毁了。

对了，还有，在组件内，如果设置了 setTimeout/setInterval，或者通过 addEventListsner 绑定了事件，一定要记得在 beforeDestroy 时取消。

有个比较重要的问题，这个来自我的同事，使用VUE后，开发思想不能从JQ中解放出来，仍然大量通过拼接字符串创建DOM，通过jq绑定并处理事件，不使用组件的props向其它组件传递数据或者设置可见，而通过组件方法来实现，导致不能充分利用VUE的特性。

推荐组件

vue-slideout 侧滑组件

npm install @hyjiacan/vue-slideout

eltable-wrapper elementui 表格与分页的封装

npm install @hyjiacan/eltable-wrapper

vue-ellipsis 文本自动省略插件

npm install @hyjiacan/vue-ellipsis

完

林林总总，杂七杂八讲了一大堆，总的来说，使用VUE的体验是很好的，开发速度比以前快了不少，再也不想回到操作DOM的时代。当然，客观地说，在一些场景下jq仍然是最好的选择，只是，我在使用VUE后，我不想客观了。

技术水平有限，哪里说得不对的，还请各位手下留情。