使用VUE一年后

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

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

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

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

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

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

使用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后,我不想客观了。

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

您可能还会对下面的文章感兴趣: