VUE在中小型项目中的应用

在众多前端框架分庭抗礼的今天，技术选型和其优劣成为了很多前端工程师茶余饭后必谈的话题。当我们去关注Angular，React，Vue种种特性时，往往发现这些框架在实际应用中难分伯仲，各有千秋。今天我们不如抛开技术，从争取项目到项目应来谈谈Vue.js.

在去年11月左右，团队接到一个“在线协同设计”类的工具型网站，网站本身的性质决定了即使采用前后端分离的方式，前端的开发量相较于后台仍然会大一些。而我们当时面临的迫切任务，是需要在一个月的时间内，构建出一个纯前端开发的demo来争取长期合作机会。这就要求我们在尤其是技术选型等重大决策中，不可以出差错。综合需求与技术，我们考虑以下几方面是我们挑选技术框架的重点关注因素：

1. 性能




2. 虚拟DOM数据渲染与操作原生DOM节点无缝配合




3. 学习成本低，团队成员均可以快速上手




4. 文档支持友好，组件库丰富

关注性能

我们从其文档上找到这样的描述

> In every real-world scenario that we’ve tested so far, Vue outperforms React by a fair margin.

> The JavaScript overhead is directly related to the mechanisms of computing the necessary DOM operations. Both Vue and React utilize Virtual DOM to achieve that, but Vue’s Virtual DOM implementation (a fork of snabbdom) is much lighter-weight and thus introduces less overhead than React’s.

描述指出在用户界面渲染DOM的成本是昂贵的，React和Vue都选择虚拟DOM的方法将成本降到最低，初次之外，Vue省去了实例化等方面造成的额外开销，因此渲染性能会更快一些。在更新页面方面，VUE会尽可能避免不必要的子组件重渲染，这一点相比于React，略胜一筹。在我们的实际应用中，也发现，当数据量偏大的时候，react仍然有其不可忽视的优势，而小型数据量，vue更加灵活。

学习成本

在学习React之前，我们需要至少了解JSX和ES2015的规范，JSX 在逻辑表达能力上虽然更加优秀，但是很容易写出凌乱的render 函数，不如单文件组件看起来一目了然。当然，也需要考虑开发人员对于代码风格的偏执。

Angular2更加陡峭的学习曲线，也让不少前端同学望而生畏。除了要掌握Typescript的编码规范，还要让思维从Angular1时代向组件化时代迁移。而Angular2面向大型企业应用的特质，在中小型项目中，也显得有点“大材小用”。

最后，我啰嗦了那么多，还是有请VUE的作者尤雨溪来对不同框架的使用场景做一下简单描述： > React 配合严格的 Flux 架构，适合超大规模多人协作的复杂项目。理论上 Vue 配合类似架构也可以胜任这样的用例，但缺少类似 Flux 这样的官方架构。小快灵的项目上，Vue 和 React 的选择更多是开发风格的偏好。对于需要对 DOM 进行很多自定义操作的项目，Vue 的灵活性优于 React。

文档和组件库的支持

谈及React，就不能不提到React社区，和FLUX，REDUX等应用架构，他们很好的配合React维护着一个或多个store，用来管理state的变化，从而触发view的更新。这是react受到广泛青睐的很重要的原因。同样的状态管理模式在Vuex中也有体现，它采用集中式存储管理应用的所有组件的状态。在社区贡献和三方组件库成熟度方面，Vue的确还有一段路要走，然而在我们实践中应用Vue＋VueRouter＋VueResource＋Vuex已经足够构建一套较为健壮的解决方案，Vue更有丰富的ui库，像elementUI，iView等等，都在持续的维护中。

Vue友好的多语言文档，也是我们选择它的一个重要原因，它很大的降低了开发团队的学习成本，不仅仅是vue本身，上文提到的VueRouter，Vuex等等也都在不断完善其中文文档。担心中文文档不够Native？Naive！Vue会先完善其标准英文文档，再扩充其他语言文档的翻译。相信配合英文文档，更加有助于程序员理解其设计思想。

综合以上考虑因素，我们最终选择Vue来作为项目的技术选型。事实证明，我们的选择是正确的，在项目中，vue表现了其很好的虚拟Dom性能，数据渲染，与纯dom操作的良好配合。大量与Angular1.x相似的指令，和与react相似的生命周期概念，让无论是擅长angular还是react的开发人员都可以快速理解并上手。当然，坑也是不少的。如果大家感兴趣，下期我会专门写一个vue填坑指南，供大家参考。

最后，感谢Vue帮助我们在短时间内取得客户的认可，获得了继续开展项目的机会。我们也希望有更多的机会沿用Vue+webpack构建中小型项目的思路，为其他分公司争取到更多的机会，希望这种技术选型可以被越来越多的客户关注。也欢迎感兴趣的同事与我们交流哦。

参考：

https://www.zhihu.com/question/31585377/answer/525765

https://vuejs.org/v2/guide/comparison.html