为何 Vue 更符合这个时代的大势所趋？
技术编辑：徐九丨发自 SegmentFault 思否html
不久前，尤雨溪发布了 Vue 3.0 Beta 版本。前端
发布以后咱们对社区里的前端开发者作了一次调查沟通，你们广泛认为 Vue 已经具有了商业项目开发的必备条件，如语法精炼、优雅而简洁、代码的可读性高、成熟的组件模块化可以让开发者从编码中得到乐趣等等，固然，还有商业项目开发最为看重的与第三方控件的结合能力。vue
正是这些能力，确保了“后浪” Vue 可以与 React、Angular 等老牌前端开发框架并驾齐驱，在国内开发者当中占据愈来愈重要的位置，逐渐有发展成为国内三大前端框架之首的趋势。数据库
不过，在读者看来，Vue 做为近几年发展最快的 JS 框架， 其崛起主要缘由不仅仅是由于粉丝的过分追捧，也并非由于某个大公司的权威推进。和 React、Angular 相比，Vue 在可读性、可维护性和趣味性之间作到了很好的平衡，结合咱们以前为你们推荐过的纯前端表格控件 SpreadJS，有用户表示仅经过一周的自学就搞出来了一个可供企业内部使用的表格协同文档系统。npm
本文咱们将经过分析 Vue 的特性，谈谈为何商业项目开发我更推荐 Vue，而不是 React 和 Angular。编程
Vue、React、Angular 优点对比
这个对比表应该能够表明大部分人对于三大前端框架的理解。后端
React 的灵活性很高，这就决定了它的上限也很高。但 React 相对于 Vue，规矩更多，为了让项目代码等规矩更有条理性，须要更多的代码来实现，假若有一天咱们再也不依赖一大堆 npm 包和 ES5 编译器，要作出 React 应用简直是难如登天。前端框架
而相比 React 所强调的所谓 JS 纯净性和代码可读性，Angular 的确算得上一款优秀的前端框架。Angular 能够帮助咱们快速进入开发，在代码的头一千行，咱们会感到颇有趣，但在那以后，代码将开始变得糟糕起来。大部分时间，你都会迷失在各类指令和做用域里，代码管理难度将会劝退大部分新来的开发人员。前端工程师
所以，Angular 的主要问题就是太难了，入门难、作项目也难，哪怕是个资深的前端工程师也会头痛，但前期的投入换来的是后期的低维护压力。架构
对此，网上专门有人总结了一个公式：
React = Think in JS, everything is JS + Data (structure)
Angular = Think in OO + Patterns (lots of) + 最佳实践
Vue 很好的借鉴了两者的设计理念，并融会贯通。对于大部分开发者来讲，它优雅而简洁，可让咱们把注意力集中在解决问题，而非代码逻辑上。
Vue 的独特优点
Vue 和其余前端框架相比，在结构、样式、业务分离等方面更清晰完全，更符合前端多年来的编码习惯，更符合直觉、更容易学习和维护。
入门很是容易，资料丰富，框架功能完善，加入很是多的特性，例如，if, for, async,为开发者节省不少垃圾代码。模板支持 html 和 jsx，支持自定义指令，方便操做 dom 的一致行为。
1、门槛低、上手快
Vue 上手简单的缘由是无需复杂配置，只须要一个 HTML 与相关文件就能跑起来。从设计的角度上来看，Vue 考虑的也是如何下降门槛，让只掌握了 Web 基础知识 (HTML, CSS, JS) 的状况下，可以最快理解和上手，从而实现和完成一个应用。
和 React、Angular 相比，Vue 的中文文档是写的最好的，再加上国内有很是丰富的视频、图文教程、各类开源的插件，哪怕是一个新手前端开发，学习一周左右就能够搞一个项目出来。就如咱们开头所说，配合第三方前端表格控件 SpreadJS，自学一周就能作出一个企业级的表格协同文档。因此，它对于非专业前端，或者前端入门人士来讲是很是适合的。
其次，Vue 设定多，因此须要思考的就少。属性指令定义了一大堆，API 文档整理好的就在那里，须要什么一查，最佳实践的 demo 写好了放在那边，照着写就 OK 了。
2、人性化，符合用户习惯
React 的设计理念是提供强大而复杂的机制，让开发者来适应我；而 Vue 则是为了更适应开发者的使用习惯，在不少设定上都是让开发者怎么爽怎么来。
好比 Vue 的 API 跟传统 Web 开发者熟悉的模板契合度很是高。Vue 的单文件组件是以模板+JavaScript+CSS 的组合模式呈现，它跟 Web 现有的 HTML、JavaScript、CSS 可以更好地配合；Vue 提供反应式的数据，当数据改动时，界面就会自动更新，而 React 里面则还须要调用方法 SetState。
3、Vue + 第三方控件 = 效率高 & 使用便利 & 组件化架构
前面咱们提到了 Vue 的两个基础特性，但能成为时代的发展趋势，说明 Vue 的能力远不止于此。
从咱们团队尝试使用 Vue 的状况来看，Vue 使用起来异常简单，它从 React 那里借鉴了组件化、prop、单向数据流、性能、虚拟渲染，并意识到状态管理的重要性，并从 Angular 那里借鉴了模板，并赋予了更好的语法，以及双向数据绑定（在单个组件里），它不强制使用某种编译器，因此你彻底能够在遗留代码里使用 Vue，并对以前乱糟糟的 jQuery 代码进行改造。
即使，仍然有不少人认为 Vue 只适合开发简单的网站或者单页面应用，但其实 Vue 有着比 React 和 Angular 更为丰富多元的第三方控件资源。配合这些资源使用，Vue 作企业级项目甚至比其余框架来的更加便利高效。
这里咱们仍是用第三方控件 SpreadJS 举例，看看苏宁易购是如何在短短一周内，搭建并上线一个企业级的表格协同文档系统的。
经过嵌入 SpreadJS 在线编辑器，开发的系统界面
苏宁易购做为我国领先的 O2O 智慧零售商，在实现协同办公以前处理内部信息的办法是：在 Excel 上安装插件，经过插件与数据库通讯，实现数据权限管控，这样作很是的低效且混乱。
为了提高效率实现真正的协同办公，它们采购了 SpreadJS 纯前端表格控件，为其构建基于 Web 端 + Vue 集成的 Excel 数据管理系统 —— 「极客办公平台」。
极客办公平台界面截图
之因此选用 Vue 做为前端框架，是由于 Vue 自己经过提供现成的范式让整个项目的搭建过程更加快捷。题外话：其实在选择 Vue 以前，项目组已经尝试过 React 框架，可是一次又一次的整理prop和重构微组件的过程让其痛不欲生。
而之因此选用 SpreadJS ，是由于它已经实现了微软 Office Excel 90% 以上的内置功能，开发人员无需安装任何软件，只需增长一些 UI 样式和下拉框，就能够迅速交付一套完整的基于 Web 的 Excel 功能模块。
据苏宁易购系统架构师候健的分享所述，为保证新老系统顺利过渡，须要投入人力，完成大量的 Excel 数据迁移工做，所以，新老系统对 Excel 文件的兼容性相当重要。而借助 SpreadJS 纯前端无损导入导出 Excel 这一产品特性，极客办公平台才得以顺利完成交付并迅速投入使用。
点击此处，了解 SpreadJS 与 Vue 集成，苏宁集团“极客办公”系统的开发案例。
为何选择 Vue + SpreadJS？
使用 Vue + SpreadJS 能够快速搭建一套在线协同表格文档，不管是对于文档的性能、项目研发效率，以及后期维护成本和新老系统数据迁移成原本说，它们都是一对“最佳拍档”。
SpreadJS 提供了类 Excel 的操做界面和开放的 API，将其嵌入系统，可快速实现 Excel 导入导出、公式计算、在线填报数据、打印报送、实时预览、数据校验、服务端数据交互等功能，经过对其二次扩展，能够将 SpreadJS 做为在线文档协同编辑系统的核心模块，知足多人协做、实时编辑、数据同步、多级上报、历史查询等业务需求。通过实测，借助 Vue + SpreadJS，能够实现用不到 100 行代码，将 Excel 的功能和使用体验完美嵌入到在线文档系统中。
如上面苏宁易购的例子，在 Vue 对应的页面组件 mount 中从新调用初始化方法，实现高度相似 Excel 的表单布局，仅需以下代码：
Vue —— 契合当下的大势所趋
咱们已经屡次尝试使用 Vue 为不一样的项目开发了不少代码，结果也很使人满意（每一个项目周期不超过 3 个月）。也许，3 个月对于后端开发来讲算不上什么，但在 JS 世界里，它举足轻重 。
文无第一武无第二，无谓的争论谁比谁好并无什么意义，本文也并非但愿将这三个框架分个高下，而是但愿能够给你们提供更多参考信息，根据自身项目的实际需求来选择更适合的框架。
从客观事实来讲，最具创新力的是 React，而最具企业级能力的是 Angular，可以取长补短，各项数据介于二者之间的是 Vue。
正是由于 Vue 具有门槛低、易上手、人性化、效率高等特色，外加有着最为丰富的中文资源和诸如 SpreadJS 等优秀的第三方控件加持，开发者们得以实现项目的“短平快”开发。在这个追求「快速」和「变化」的时代，这款前端框架的定位明显更契合时代的主流需求。
即使 Vue 的做者尤雨溪曾屡次表示，若是多年之后要论历史地位，React 确定是高于 Vue 的。不过历史地位并非开发者须要考虑的问题，咱们能够为某一个编程语言、某一种框架的社区发展贡献力量，但在实际的项目中，不能盲目的被束缚住。
文中资源扩展阅读：Vue 官方文档：https://cn.vuejs.org/v2/guide/
SpreadJS 官网：https://www.grapecity.com.cn/...
苏宁集团开发案例：https://www.grapecity.com.cn/...
