经常看见在vue或者angular的介绍里说自己的特色是双向数据绑定,而在看react的介绍中,说自己的优势和特色是单向数据绑定。
双向和单向只不过是框架封装程度上的差异,本质上两者是可以相互转换的。
更多讨论见知乎:https://www.zhihu.com/question/49964363
1.单向数据绑定
单向数据绑定的优点:
单向数据流,所有状态变化都可以被记录、跟踪,状态变化通过手动调用通知,源头易追溯,没有“暗箱操作”。
同时组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性。
单向数据绑定缺点:
则是代码量会相应的上升,数据的流转过程变长,从而出现很多类似的样板代码。
同时由于对应用状态独立管理的严格要求(单一的全局store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。
同时组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性。
单向数据绑定缺点:
则是代码量会相应的上升,数据的流转过程变长,从而出现很多类似的样板代码。
同时由于对应用状态独立管理的严格要求(单一的全局store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。
2.双向数据绑定
双向数据绑定的优点:
在表单交互较多的场景下,会简化大量业务无关的代码。
双向数据绑定缺点:
“暗箱操作”,无法追踪局部状态的变化
两者并不互斥,实际上,在ng2中你可以非常方便的同时使用两者。全局性数据流使用单向,好跟踪。局部性数据流使用双向,简单。
// v-model 单向数据 实现双向绑定 <input type="text" v-bind:value="msg" v-on:input="msg = $event.target.value">