[摘要]前端选择vue还是Angular4？“ 做选择从来不是一件简单的事，重要的是要明确自己想要什么和不能接受什么。”Web 前端开发是时下最热门的领域之一，为了提升...

前端选择vue还是Angular4？

“ 做选择从来不是一件简单的事，重要的是要明确自己想要什么和不能接受什么。”Web 前端开发是时下最热门的领域之一，为了提升开发效率和用户体验从而创造更具竞争力的产品，选择适合自己项目或团队的开发框架成为技术决策者首先需要解决的问题。那么2022前端框架选哪个？Vue，React 还是 Angular？下面我们一起来看看吧。

但是近年来随着技术和开发理念的发展和进步，前端开发框架也在不断迭代。在众多选择面前，如何甄别各个框架的特长和短板？如何判断其技术架构是否适合自己？

本文尝试从多个角度分析市面上主流的前端框架，试图为你的选择提供一些参考。

前端框架的流行度

从上图 Stack Overflow 的数据可以看出近十年来前端框架流行程度的变化。

从 2016 年开始，React 和 Angular 被人们学习和讨论的越来越多。而曾经辉煌一时的 jQuery 逐渐没落，但还仍有一定的群众基础。

Vue 虽起步较晚，但是增长势头很强劲。

截止到2020年末，Github 上的 Star 数量也从侧面印证了 Vue、React、Angular 的流行程度。毫无疑问 React、Vue 和 Angular 仍将是 2021 年最受青睐的三款开发框架。

jQuery 有许多支持者，而且近期也有很不错的用于支持移动端开发的进展。但从本质上讲它仍是一款用于处理 DOM 和 CSS 并提供交互动画的库。

在开发大型应用、高级 JavaScript 特性支持 、可重用组件以及更少量的编码方面，仍旧与现代框架有不少的差距。

其他的框架，无论是从用户量还是社区发展的角度看和 React、Vue 和 Angular 都有很大的差距。

React、Vue 和 Angular 介绍

采用的网站：Airbnb、Facebook、Netflix …

React 最初是 Facebook 为满足其产品需求而开发的，于 2013 年向受众展示并开源。其虚拟 DOM 技术（virtual Document Object Model）大幅提升了页面的渲染性能和表现力。

对于那些想要构建稳定、高效的单页面应用程序（single-page application）的项目来说 React 是个不错的选择。

采用的网站：PayPal、Google、Autodesk …

Angular 是谷歌支持的用于构建用户界面的开源框架，它的历史最早可以追溯到2010年正式发布的AngularJS。后期开发团队将 AngularJS 基于 TypeScript 重写，于 2016 年 9 月发布了 Angular 2 以适应日益增长的Web需求。为了避免混淆，新框架名称去掉了 “JS”。

Angular 是一个大而全的开发平台，也是一个完整的技术体系，非常适合大型复杂项目的开发和维护。

采用的网站：Gitlab、Behance、Alibaba …

Vue 是由前 Google 员工 Evan You 于 2014 年开发的。它具有平缓的学习曲线，只需要有 HTML、CSS 和 JavaScript 的基础就可以很快上手，官方文档也很细致和全面。这在注重快速迭代、小步快跑的互联网大环境中尤为重要。

设计哲学

React

React 提供了一个轻量级的 DOM 渲染库，旨在以一种高效和可重用的方式创建组件和子组件。它引入了 JSX 的语法，通过在 JavaScript 代码中嵌入 “HTML 元素” 实现在组件层面的关注点分离。

React 主张更大的灵活性，因此除了核心的 DOM 渲染库，官方并没有提供更多的例如状态管理和路由等类库的支持。

好在 React 拥有庞大且专业的社区，贡献了大批像 react-redux、react-router 这样强大的第三方类库，在其中你总能找到适合自己的解决方案。

Angular

Angular 提供了三个框架中最多的功能，如用户界面控制、用户输入处理、表单验证、状态管理、路由、测试、PWA 等等。

因此 Angular 更像是一个平台，它提供了一套工具集，覆盖了几乎所有开发周期内可能出现的问题。

Vue

Vue 的核心库只关注视图层，它提供的类库和工具比 React 多（CLI、 状态管理和路由的支持），但相比 Angular 更少。

Vue 是渐进式的，被设计为可以自底向上逐层应用。Vue 的一个特色是使用文件扩展名为 .vue 的 single-file components (单文件组件) ，可以在一个文件中同时处理 HTML、CSS 和 JavaScript。

小结

React 主张灵活性，相对的就丢失了确定性，Angular 满足了确定性，但又不够灵活。这本身就是在事物的不同方面做取舍。

Vue 似乎兼容了确定性和灵活性，并且提供渐进式的支持，但是过高的自由度带来的是不够稳定和健壮。

谁的设计更好？这可能是个难以回答的问题。不同的团队、不同的需求，所侧重的方向也不尽相同。

语法风格

React

React 使用 JSX 将 JavaScript 和 HTML 结合在一起，在构建项目的时候 JSX 会被编译为常规的 JavaScript 和 HTML 代码。

下面是 React 的 Hello World 组件代码。

importReactfrom”react”functionHelloWorld(props){return

Hello World

}exportdefaultHelloWorld

你可以通过 JavaScript 函数创建 React 组件，在返回值中使用 JSX 呈现视图内容。

Angular

Angular 使用 TypeScript 作为开发语言。他是 JavaScript 的超集，在面向对象、类、接口、静态类型检查等方面提供了更全面的支持。

Angular 会将 TypeScript 项目编译为与浏览器兼容的 JavaScript 代码。

你可以用如下的方式编写 Angular 组件。

import{ Component }from’@angular/core’;@Component ({selector:’my-app’,template:`<h1>Hello World</h1>`,})exportclassAppComponent{}

Angular 负责在幕后将你定义的组件，转换为真实的 DOM。

Vue

Vue 使用普通的 JavaScript 语法，对于新手而言很友好。

newVue({el:’#app’, data: {message:’Hello Vue.js!’ }})

小结

三个框架都是基于组件来构建功能模块和界面。

React 和 Angular 都有自己的主张的技术栈（JSX、TypeScript）因此有更陡峭的学习曲线，而在这方面 Vue 则没有过强的主张，更易上手。

但 React 和 Angular 也正是因为有自己的主张，才使得自身能够支持更加先进和高级的特性。

因此，讨论谁的语法风格更优秀似乎并没有什么意义，适合自己的就是最好的。

React

优势

采用虚拟 DOM 大幅提升页面性能和一致性。

拥有强大的浏览器端开发工具，对于提升开发和调试的效率至关重要。

庞大的社区生态，使你总是能够找相关问题的解决方案。

单向数据流能防止很多错误，并且有助于调试工作。

可重用的组件从某种程度上来说简化了开发工作，提升了效率。

可以方便的使用 React-Native 开发移动端 Web 应用。

不足

不完整，官方仅提供 MVC 模型的视图（View）部分，因此你不得不选择其他的第三方库。

React 的发展速度非常快，这意味着你现在学习的特性很可能在以后被遗忘，你必须时刻跟随它的脚步。

相对来讲 React 的文档可能不是很全面。

React 生态主张函数式编程和 JSX 语法特性，对于不熟悉相关技术的新手，上手难度较大。

Angular

优势

Typescript – 相比较 JavaScript 而言是更健壮的语言，有利于写出高效和可维护的代码。

指令 – 作为 HTML 的扩展，指令可以让工程师轻松地创建动态且丰富的内容。

依赖注入使组件更易于重用，更易于管理和测试。

双向数据绑定可以使工程师减少开发的时间。

基于组件的体系结构，有利于提供可重用的高质量代码。

强大的社区支持，包含全面的文档、讨论和第三方工具。

不足

将旧的系统从 AngularJS 迁移到 Angular 需要一定时间。

从某种程度来说，Angular 系统显得冗长和复杂。

Angular 是一套完整的前端解决方案，有很陡峭的学习曲线。

使用真实的 DOM ，对于动态 Web 内容的加载在性能上会受到些许的影响。

Vue

优势

具有平缓的学习曲线，对于新手开发者非常友好。

在单个文件中分离关注点，程序开发更便捷，可读性更强。

和 React 一样，具有虚拟 DOM 带来的高渲染性能和一致性的优势。

和 Angular 一样支持双向数据绑定，数据更新和追踪更直接。

可重用组件，对于简化开发工作、提升开发效率至关重要。

生态系统完善，官方提供状态管理和路由库的支持。

出现时间较晚，吸收了 React 和 Angular 的优势，增长迅速。

不足

双向数据绑定可能会带来一些问题。

对比 React 和 Angular，Vue 背后没有大型企业的支持。

对较旧版版本的 Safari 支持会出现一些问题。

过高的灵活性通常会引入更多的错误以及编码的不规范。

社区中文化程度较高，对于英文用户来讲很难学习。

葡萄城深耕软件开发技术40余年，产品具备一流的前端框架支持能力，将 SpreadJS 纯前端表格控件与 Vue 、React 等前端框架集成，即可实现类似 Excel 的电子表格功能，如公式计算、图表、在线导入导出和数据透视表，使应用程序具备“在线 Excel”的能力，欢迎搜索并访问“葡萄城官网”了解。

前端选择vue还是Angular4？

实践经验表明，Vue在数据量很大的时候不好维护，所以对于大型项目，Angular4显然更适合，但Angular比较复杂，还有面向对象、依赖注入、MVC等思想；如果由后端学过Java的人来做，应该也比较好上手；但是对于只学过前端的人来说，有一堆思想要领悟，上手比较慢；但Vue则相对简单，Vue的好用之处大概就是，用下来你发现，div还是那个div，css还是那个css，js也还是那个js，只是组织的方式和配合他们的工具不同而已。

当前Vue的生态环境相较两年前成熟了很多，相关工具、官方文档和非官方文档都很完善，社区也很活跃。越来越多的大公司已将Vue用于生产环境，github上现在也已经有数以万计的跟Vue有关的开源项目了。因此，对于中小型项目，你完全可以放心地使用Vue来构建。

既然说Vue工具齐全，那我这里简单列举几个常用的工具吧：

vue-router：用于配置单页面应用的组件和映射，使用的方式和ui-router类似，支持嵌套路由，正则匹配路由，参数传递，history模式

vuex：一个专门为Vue应用设计的 状态管理模型和库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更

element:饿了么出品，基于VUE的组件库，开箱即用。

除了上述之外，还有webpack、axios、node等等工具可以用，且关于Vue的官方和非官方文档都很丰富，完全可以快速上手。

最后，Vue跟微信小程序很像，而且美团还开源了mpvue，意味着你甚至可以直接使用Vue来开发小程序。等于说，你学会了Vue，不仅学会了前端，还学会了微信小程序，一举两得，岂不美哉？

以上就是我拙见，欢迎在评论区留言讨论。

上一页12下一页