angular,vue,react前端框架的个人对比:

React是单向响应的数据流用于构建用户界面的js库,从而减少了重复代码,这也是它为什么比传统数据绑定更简单,跟踪数据的改变需要可变对象可以与之改变之前的版本进行对比,这样整个对象树都需要被遍历一次虚拟DOM树的更新:属性更新,组件自己处理,
结构更新,重新“渲染”子树(虚拟DOM),找出最小改动步骤,打包DOM操作,给真实DOM树打补丁。从数据绑定来看,React虚拟DOM没有数据绑定,因为setState()不维护上一个状态(状态丢弃),谈不上绑定
从数据更新机制来看,React类似于提供数据模型的方式(必须通过state更新)onchange和state的setState 可以实现数据的双向。
工作流程是Controller负责将Model的数据在view展示,用户交互是在Controller里面负责逻辑的处理把Model的数据变化传递给View引起视图的更改。View和Model不直接联系,数据的流向是单向的。

Angluar 的脏值检测机制使用的MVVM的思想实现双向数据绑定,视图作为数据模型的一种映射,使得控制器完全与视图分离,而不必关心视图的展现,你可以将视图简单的理解为数据模型的实时映射,对于所有的数据和视图的绑定关系进行一次检测,识别是否有数据发生了改变,有变化进行处理,可能进一步引发其他数据的改变,所以这个过程可能会循环几次,一直到不再有数据变化发生后,将变更的数据发送到视图,更新页面展现。

vue 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()劫持各个属性的setter,getter函数,view中改变值都会触发set方法,将新值复制进去,在重新在view中匹配值,当然你们有更复杂的控制操作,get方法着是让ready中获取的这个属性值一直保存最新值.在数据变动时发布消息给订阅者,触发相应的监听回调。
vue支持单向绑定和双向绑定
单向绑定:由data和{{}}解析的数据,
双向绑定:表单的v-model,用户对View层的更改会直接同步到Model层
实际上v-model只是v-bind:value 和 v-on:input的语法糖,我们也可以采取类似react的单向绑定。
vue的v-model在操作表单是,显得很简单,我们不用去写繁琐的onChange事件去处理每个表单数据的变化,但是双向绑定也会导致数据变化不透明,不清晰可控。

单向数据绑定 vs 双向数据绑定
单向数据绑定意味着单向的数据流向,指的是View层和Model层之间的映射关系。
双向数据绑定是视图层的数据层的其中一方改变另一方相应更新。
单向数据流 vs 双向数据流
vue(vuex)和react(flux)单向数据流
虽然vue也可以实现双向绑定通过v-model,但是vue和react父子组件之间数据传递用过,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改
angular允许在子组件中直接更新父组件的值。

看到这篇博客觉得写得很详细,收藏分享给大家,欢迎讨论

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值