angular react vue对比

数据绑定

1. Angular和Vue的双向数据绑定

Angular双向数据绑定原理

• 从UI到数据：UI事件，ajax请求，timeout等。
• 从数据到UI：脏检查

Vue双向数据绑定原理

• 监听UI事件
• 为每个用到相同vm.data的地方添加监听器，当vm.data数据改变时，将通知这一组watcher调用其update方法实现vm.data到DOM的更新，关键是在在Object.defineProperty中重写setter和getter。

两种绑定原理优势分析：

Vue的setter和getter每次都要修改DOM结构，性能影响较大，而Angular会将批量操作延迟到一次更新，性能相对较好。

Angular中当watcher越来越多时会变得非常慢，当在一个watcher中触发另一个数据的更新脏检查可能要执行多次，严重影响性能。而Vue中不存在这个问题，Vue只追踪依赖，数据的变化更新是独立的。

Angular和Vue都是MVVM模型，都是通过类似模板的语法渲染DOM。

2. React的单向数据流

React推崇函数式编程，给定原始的界面，通过施加变化推导出另一个变化从而引发界面更新。

视图渲染

1. React虚拟DOM

构建虚拟DOM树，当状态发生变化时更新虚拟DOM树，为真实DOM打补丁即可。虚拟DOM提供函数式的方法描述视图，每次更新都会渲染整个应用，React支持服务器端渲染，因此，在超大量首屏渲染速度上有优势

2. Vue

Vue采用依赖追踪，变了多少就修改多少。当数据量较大且变化的数据量较小时，Vue速度更快，React的虚拟DOM需要的计算时间可能相对大一些。

Angular

Angular的脏检查和React的虚拟DOM都是进行全局性的检查对比数据变化，进而对真实DOM进行修改，个人认为渲染性能差距不大，Angular2和React都支持服务器端渲染。

前景

这几个框架基本都能应该市面上的需求，只是区别在于可优化性及对开发体验的优化，例如vue的track-by和react的shouldComponentUpdate等，然而随着浏览器和手机性能的提升，框架本身的差距会越来越小，因此更多的优化点还是要从图片加载，合理利用缓存等其他方面入手。