2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > angular react vue对比

angular react vue对比

时间:2019-08-29 21:18:22

相关推荐

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中重写settergetter

两种绑定原理优势分析:

Vue的settergetter每次都要修改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等,然而随着浏览器和手机性能的提升,框架本身的差距会越来越小,因此更多的优化点还是要从图片加载,合理利用缓存等其他方面入手。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。