双向数据绑定和单项数据绑定的认识

  

参考文章:前端

https://segmentfault.com/q/1010000002511449/a-1020000002514653vue

https://www.zhihu.com/question/49964363/answer/136022879angularjs

单向数据绑定:指的是咱们先把模板写好,而后把模板和数据(数据可能来自后台)整合到一块儿造成HTML代码,而后把这段HTML代码插入到文档流里面。vuex

单向数据绑定缺点:HTML代码一旦生成完之后,就没有办法再变了,若是有新的数据来了,那就必须把以前的HTML代码去掉,再从新把新的数据和模板一块儿整合后插入到文档流中。segmentfault

双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定。前端框架

用户在视图上的修改会自动同步到数据模型中去,一样的,若是数据模型中的值发生了变化,也会马上同步到视图中去。
双向数据绑定的优势是无需进行和单向数据绑定的那些CRUD(Create,Retrieve,Update,Delete)操做
双向数据绑定最常常的应用场景就是表单了,这样当用户在前端页面完成输入后,不用任何操做,咱们就已经拿到了用户的数据存放到数据模型中了。
目前。实现双向数据绑定的前端框架主要有AngularJS,VueJS(经过引入vuex来实现单项的数据监控)等 框架

大名鼎鼎的angular实现双向绑定的原理就是经过$watch来进行脏检查,可是这种脏效率很若是是大量的检查那就不敢想象了。spa

单项数据和双向数据使用的场景.net

单向绑定的优势是相应的能够带来单向数据流,这样作的好处是全部状态变化均可以被记录、跟踪,状态变化经过手动调用通知,源头易追溯,没有“暗箱操做”。同时组件数据只有惟一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性。缺点则是代码量会相应的上升,数据的流转过程变长,从而出现不少相似的样板代码。同时因为对应用状态独立管理的严格要求(单一的全局store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。

基本上双向绑定的优缺点就是单向绑定的镜像了。优势是在表单交互较多的场景下,会简化大量业务无关的代码。缺点就是因为都是“暗箱操做”,咱们没法追踪局部状态的变化(虽然大部分状况下咱们并不关心),潜在的行为太多也增长了出错时 debug 的难度。同时因为组件数据变化来源入口变得可能不止一个,新手玩家很容易将数据流转方向弄得紊乱,若是再缺少一些“管制”手段,最后就很容易由于一处错误操做形成应用雪崩。
最后总结咱们要经过本身的业务场景合理的选择
相关文章
相关标签/搜索