angular react vue对比

前端之家收集整理的这篇文章主要介绍了angular react vue对比前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

数据绑定

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

Angular双向数据绑定原理

@H_403_7@
  • 从UI到数据:UI事件,ajax请求,timeout等。
  • 从数据到UI:脏检查
  • Vue双向数据绑定原理

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

    原文链接:https://www.f2er.com/angularjs/146483.html

    猜你在找的Angularjs相关文章