2.1 Vue.js产生的背景

什么是Vue.js?Vue.js也经常被简称为Vue。Vue的读音是“[vjuː]”,与英文单词“view”的读音类似。Vue的命名目的与view的含义有关,即致力于视图层的开发。

Vue.js是一套用于构建UI的框架(Framework)。Vue.js的核心库只关注视图层,不仅易于上手,还易于与第三方库或既往项目整合。另外,当与现代化的工具链和各种支持类库结合使用时,Vue.js也完全能够应对复杂的单页应用程序(Single Page Application,SPA)。

Vue.js的产生与当前的前端开发方式的巨变有着必然联系。

2.1.1 Vue.js与jQuery的不同

传统的Web前端开发主要采用以jQuery为核心的技术栈。jQuery主要用来操作DOM(Document Object Model,文档对象模型),其最大的作用是消除各浏览器的开发差异,简化和丰富DOM的接口(Application Programming Interface,应用程序编程接口),例如DOM的转换、事件处理、动画和AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML技术)交互等。

Vue.js的优势如下。

  • 它是一个完整的框架,试图解决现代Web应用开发各个方面的问题。Vue.js有着诸多特性,核心功能包括模块化、自动化双向数据绑定、响应式等。
  • Vue.js用一种完全不同的方法来构建UI,其中以声明方式指定视图模型驱动的变化。而jQuery常常需要编写以DOM为中心的代码,随着项目复杂性的增长(无论是在规模还是在交互性方面),代码会变得越来越难控制。

鉴于以上优势,所以Vue.js更加适合现代的企业级应用开发。

2.1.2 Vue.js与React、Angular的优势对比

在当前主流的Web框架中,Vue.js与React、Angular是备受瞩目的3个框架。

1. 从市场占有率来看

Angular与React相对来说比较“老牌”,而Vue.js是后起之秀,所以Angular与React的市场占有率都比Vue.js的市场占有率更高。但需要注意的是,Vue.js的用户增长速度很快,有迎头赶上之势。

2. 从支持度来看

Angular与React背后的公司分别是Google和Facebook,而Vue.js属于个人项目。所以无论是开发团队还是技术社区,Angular与React都更加具有优势。

Vue.js的使用风险相对高一些,毕竟它在很大程度上依赖于维护者的生存能力和将它继续维护下去的愿望。好在目前大的互联网公司都在与Vue.js展开合作,这样在一定程度上会让Vue.js走得更远。

3. 从开发体验来看

React应用是采用JavaScript或者TypeScript编写的,并采用组件化的方式来开发可重用的UI。React的HTML元素是嵌在JavaScript代码中的,这样在一定程度上有助于关注点的聚焦,但不是所有的开发人员都能接受这种JavaScript代码与HTML元素“混杂”的方式。

Vue.js是采用JavaScript编写的,在Vue.js 3中也支持TypeScript。Vue.js主要面向开发渐进式的Web应用,用户使用起来比较简单,易于入门。

Angular有着良好的模板与脚本相分离的代码组织方式,在大型系统中可以方便地实现代码管理和维护。Angular完全基于TypeScript语言来开发,拥有更强的类型体系,使得代码更加健壮,也利于后端开发人员掌握。

4. 从框架的强制性来看

每个框架都不可避免地会有自己的一些特点,从而对开发人员有一定的要求,这些要求就体现了强制性。强制性的约束有大有小,框架的强制程度会影响在业务开发中的使用。例如,Angular是强制性大的框架,开发人员如果要用它,则必须接受以下要求:

  • 必须使用它的模块机制;
  • 必须使用它的“依赖注入”;
  • 必须使用它的特殊形式来定义组件。

所以Angular是有比较强的排他性的。如果你的应用不是从头开始构建的,而是要不断考虑是否跟其他技术集成的,这些要求会给你带来一些困扰。

又如React,它也有一定程度的强制性。它的强制性主要体现在函数式编程的理念,例如:

  • 需要知道什么是副作用;
  • 需要知道什么是纯函数;
  • 需要知道如何隔离副作用。

相对而言,React的强制性没有Angular的那么大,但是比Vue.js的大。

因此,Vue.js有小强制性,可以让开发人员更快上手。

2.1.3 Vue.js、React、Angular三者怎么选

Angular、React、Vue.js都是非常流行的框架,有着不同的受众,开发人员选择哪个框架应考虑实际应用的需要。

总的来说,三者在入门难度和功能强大程度上的排序如下。

  • 入门难度顺序:Vue.js<React<Angular。
  • 功能强大程度:Vue.js<React<Angular。

建议如下。

  • 如果你只想快速实现一个小型应用,那么选择Vue.js无疑是最经济的。
  • 如果你想要建设大型的应用,或者考虑进行长期维护,那么建议你选择Angular。Angular可以让你从一开始就采用规范的方式来开发,并且能降低出错的可能性。