本文主要是介绍VUE React Angular，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Typescript, ES6 & ES5

React 专注于使用 Javascript ES6

Vue 使用 Javascript ES5 或 ES6

Angular 依赖于 TypeScript

模板 —— JSX 还是 HTML

React — JSX：可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言

Vue 具有“单个文件组件”

Angular 模板使用特殊的 Angular 语法（比如 ngIf 或 ngFor）来增强 HTML框架和库

框架和库

React 和 Vue 是很灵活的。他们的库可以和各种包搭配（有了 React，甚至可以交换库本身的 API 兼容替代品）

Angular 是一个框架，因为它提供了关于如何构建应用程序的强有力的约束，并且还提供了更多开箱即用的功能。Angular 还有一个令人困惑的构建工具，样板，检查器（linter）和时间片来处理。

状态管理和数据绑定

React 经常与 Redux 在一起使用。Redux 以三个基本原则来自述：1、单一数据源（Single source of truth）2、State 是只读的（State is read-only）3、使用纯函数执行修改（Changes are made with pure functions）整个应用程序的状态存储在单个 store 的状态树中。这有助于调试应用程序，一些功能更容易实现。状态是只读的，只能通过 action 来改变，以避免竞争条件（这也有助于调试）。React 只有一种方法：先更新 model，然后渲染 UI 元素。React 的方式会有更好的数据总览，因为数据只能在一个方向上流动

Vue 可以使用 Redux，但它提供了 Vuex 作为自己的解决方案

双向绑定—当 UI 元素（例如，用户输入）被更新时，Angular 的双向绑定改变 model 状态。Angular 的方式实现起来代码更干净，开发人员更容易实现

视图渲染

React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。
Virtual DOM 提供了函数式的方法描述视图，它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
在超大量数据的首屏渲染速度上，React 有一定优势，因为 Vue 的渲染机制启动时候要做的工作比较多，而且 React 支持服务端渲染。
React 的 Virtual DOM 也需要优化。复杂的应用里可以选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render；2. Components 尽可能都用 pureRenderMixin，然后采用 Flux 结构 + Immutable.js。其实也不是那么简单的。相比之下，Vue 由于采用依赖追踪，默认就是优化状态：动了多少数据，就触发多少更新，不多也不少。
React 和 Angular 2 都有服务端渲染和原生渲染的功能

Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板，数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 React 好，而且几乎不用手工优化；VUE是在模板渲染的时候，会读取{{}}之中的变量，触发get。把 Dep.target也就是渲染watcher，放在了自己的依赖（Dep实例），dep.subs 数组中；当哪个数据变化了 就会喊一声（notify），他的订阅者们（subs数组中的warcher们）就会更新( watcher.update() ) , 更新是以组件为单位。

AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。

Angular —1能通过固定的接口才能改变变量的值，比如说只能通过set()设置变量的值，set被调用的时候比较一下就知道了。这种方法的缺点是写法比较繁琐。
2脏检查，将原对象复制一份快照，在某个时间，比较现在对象与快照的值，如果不一样就表明发生了变化，这个策略要保留两份变量，而且要遍历对象，比较每个属性，这样会有一定的性能问题

体积和性能

Angular 框架非常臃肿。gzip 文件大小为 143k，而 Vue 为 23K，React 为 43k。为了提高性能，React 和 Vue 都使用了虚拟 DOM（Virtual DOM）

Vue在按照模板格式开发时就没有太多限制，得益于响应式系统，也不用去做相对应的性能优化，由于vue 内部的模板语法，能在开发环境下编译，这样就能在编译的时候去做一些性能优化

在React 中，由于jsx的写法灵活，不确定性多，所以在编译时就无法去做性能优化，而性能优化放到了开发者身上

三大框架的区别和联系

联系

1、组件化

三大框架中，都是提倡组件化开发的框架，所以，比如当你在开发vue的项目时，具备组件化的思想，在平常开发中能够有意识的去抽离展示型组件，和容器型组件，那么，在开发react 和angular时，你只会得心应手，不会处处为难

2、都是数据驱动视图

三大框架，都是属于mvvm框架，数据驱动视图的思想始终贯穿始终，所以我们在开发时，只需要关注数据变化即可，虽然使用方式不尽相同，react 属于函数式，angular 和vue 属于声明式编程，但是，数据驱动的思想不变，比如react 使用setState赋值，而vue 和angular 使用显式直接赋值他们最后的目的都是改值，从而触发页面更新

3、共同的开发套路

在三大框架中，由于都遵循组件化思想，所以，都有着相同的开发套路，只是使用方式略有差别，比如，都有父子组件传递，都有数据管理框架，都有前端路由，都有插槽，只不过在anguar中叫做投影组件,在react 中叫组合，都能实现一些所谓的高阶（hoc）函数

所以当你掌握其中一个框架以后，那么在其他框架遇见上述类似的业务场景时，只需百度只需百度其他框架类似的用法即可，到这里我终于明白刚入行是，领导告诉我，学程序，就是学思想。有了思想，框架之间就会没有壁垒。

差异

模板 vs JSX

React与Vue，angular最大的不同是模板的编写。Vue和angulr鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素，只是多了一些属性。而react则崇尚all in js 所以独创jsx的编写风格，但是他们本质上都是一个语法糖，编译之后都是一个可执行的函数，

函数式编程，声明式编程

在react中不可变值贯穿整个框架，如果你要改变数据，那么必须调用api去改，这就是函数式编程的思想，而在vue，和angualr中，声明式编程的思想也深入人心，既方便有快捷。这种直接赋值的方式，和用api赋值的方式，其实，只是用法不同而已，本质还是数据驱动

React：蚂蚁数据可视化、爱彼迎、飞猪、阿里大于、虾米音乐、口碑开放平台、猫途鹰、喜马拉雅、斗鱼、知乎、豆瓣、美团外卖H5、房多多、石墨文档、墨刀、TalkingData、xiaopiu、Teambition、Uber、倍洽、同盾科技、心知天气、拼多多（APP内嵌H5）、滴滴出行、Sentry、途牛、优酷、京东服饰+生鲜+旅行+赚钱H5、瓜子金融H5、算力矩阵、链家H5、阿里云管理后台、Coding、CodePen、树莓派、36氪、Notion、GoDaddy、站酷海洛、Plotly、麦客CRM、特赞营销日历、鹿班、网易云阅读PC端+网易云音乐H5、猎聘网、看云文档编辑页、NIKE官网、丁香医生、去哪儿H5多个模块、艺龙H5个别模块、租租车H5、汽车之家车商城、PayPal中国、Pocket、友盟、iH5...

Vue：饿了么、爱奇艺、中国平安H5、简书、途虎养车、小红书、乐视商城、手机搜狐、优酷、土豆、掘金、微博H5、大麦网H5、唯品会H5、小米商城H5、芒果TV移动版、哔哩哔哩、又拍云、七麦数据、OneAPM、阿拉丁小程序统计、网易云信+手机网易+网易邮箱H5登录页、今日头条+西瓜视频网页版、贝店（APP内嵌H5）、大搜车、滴滴开源、高德开放平台、京东拼购+领券+新人频道H5+京东云、瓜子二手车H5、土巴兔、分期乐、BITMAIN、小猪短租H5、IT桔子、创业邦H5、拍拍贷、极客邦科技+极客时间、开源中国、少数派、蓝湖、百度指数、微信公众平台、大鱼号（UC云观）、创客贴、兑吧、国美电器H5、聚美优品触屏版、钱咖、试客小兵、赚客、雪球财经、电玩巴士、Hao123触屏版、弹个车、携程H5多个模块、穷游网、一加手机...

AngularJS：百度脑图、eolinker、海致BDP、极光、Worktile、锤子科技官网、微信网页版、iTunes Connect、阿里云管理后台、鲸准对接平台..
作者：好学习吧丶
链接：https://juejin.cn/post/6844904200556511246

来源：稀土掘金
 

Mvvm & 单向数据流

Mvvm 是指双向数据流，即 View-Model 之间的双向通信，由 ViewModel 作桥接。如下图所示：

而单向数据流则去除了 View -> Model 这一步，需要由用户手动绑定

watcher 是用来订阅数据的变化的并执行相应操作

一、getter

1、按照客户的期望返回格式化数据。

2、控制服务的顺序(例如只有当连接建立时getter方法才返回相应实例)。

二、setter

1、可以限制和检验setter方法传入的参数。

2、隐藏对象内部数据结构。

3、保持对象在每个状态的完整性。

这篇关于VUE React Angular的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！