单项数据绑定、双向数据绑定及其原理(脏检查)

本文探讨了单向数据绑定和双向数据绑定的概念及其在前端开发中的应用。单向数据绑定简单易用,但灵活性较差;而双向数据绑定能够实时更新视图与数据模型,适用于表单等场景。

参考文章:

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

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


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

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


用户在视图上的修改会自动同步到数据模型中去,同样的,如果数据模型中的值发生了变化,也会立刻同步到视图中去。
双向数据绑定的优点是无需进行和单向数据绑定的那些CRUD(Create,Retrieve,Update,Delete)操作
双向数据绑定最经常的应用场景就是表单了,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户的数据存放到数据模型中了。
目前。实现双向数据绑定的前端框架主要有AngularJS,VueJS等
不过,我总感觉双向数据绑定的应用场景非常有限。 backbonejs不实现双向数据绑定的解释:大概的意思就是双向数据绑定在实际的运用中很少,没必要
"Two way data-binding" is avoided. While it certainly makes for a nifty demo, and works for the most basic CRUD, it doesn't tend to be terribly useful in your real-world app. Sometimes you want to update on every keypress, sometimes on blur, sometimes when the panel is closed, and sometimes when the "save" button is clicked. In almost all cases, simply serializing the form to JSON is faster and easier. All that aside, if your heart is set, go for it.


脏检查:

在angular中,他没有办法判断你的数据是否做了更改, 所以它设置了一些条件,当你触发了这些条件之后,它就执行一个检测来遍历所有的数据,对比你更改了地方,然后执行变化。这个检查很不科学。而且效率不高,有很多多余的地方,所以官方称为脏检查。l

Angular defines a concept of a so called digest cycle. This cycle can be considered as a loop, during which Angular checks if there are any changes to all the variables watched by all the $scopes. So if you have $scope.myVar defined in your controller and this variable was marked for being watched, then you are explicitly telling Angular to monitor the changes on myVar in each iteration of the loop.

This "digest" is also called "dirty checking", because, in a way, it scans the scope for changes. I cannot say if it's for better or for worse than observable pattern. It depends on your needs.

Some links:


### Vue中的单项数据流与双向绑定的概念及区别 #### 单项数据流 在Vue中,单项数据流是指父组件通过`props`将数据传递给子组件,而子组件不能直接修改这些`props`值。这种机制确保了数据的流动是向的,即从父组件流向子组件[^1]。如果需要更新父组件的数据,子组件可以通过事件(如`$emit`)通知父组件进行更改。这种方式使得数据流动更加清晰,便于调试和维护。 ```javascript // 父组件向子组件传递数据 <template> <child-component :message="parentMessage"></child-component> </template> <script> export default { data() { return { parentMessage: 'Hello from parent' }; } }; </script> ``` #### 双向绑定 双向绑定是Vue中通过`v-model`指令实现的一种特性,它允许数据和视图之间的同步更新[^4]。当用户在输入框中修改内容时,绑定的数据也会自动更新;反之,当数据发生变化时,视图也会随之更新。这种机制简化了表处理逻辑,但可能隐藏了一些复杂性,导致数据流不那么直观。 ```html <!-- 使用 v-model 实现双向绑定 --> <input v-model="inputValue" /> <p>当前输入值:{{ inputValue }}</p> <script> export default { data() { return { inputValue: '' }; } }; </script> ``` #### 区别 1. **数据流动方向**: - 单项数据流的数据流动是明确的,从父组件到子组件。 - 双向绑定则模糊了数据流动的方向,数据和视图可以互相影响[^4]。 2. **调试与维护**: - 单项数据流由于其明确的数据流动方向,更容易追踪问题来源[^1]。 - 双向绑定虽然方便,但在复杂场景下可能导致难以预测的行为[^4]。 3. **适用场景**: - 单项数据流适合于大型应用或团队协作项目,因为它提供了更清晰的数据流动结构。 - 双向绑定更适合简的表处理或快速开发场景,能够显著减少代码量[^4]。 4. **底层实现**: - 单项数据流本质上依赖于事件机制,通过`$emit`等方式实现父子组件间的通信。 - 双向绑定则是基于观察者模式和发布订阅模式,通过监听数据变化并触发视图更新来实现[^5]。 #### 原理 - **单项数据流**:Vue通过`props`实现父组件向子组件的数据传递,并通过`$emit`事件机制让子组件通知父组件进行数据更新[^1]。 - **双向绑定**:Vue利用`Object.defineProperty`(在ES6环境中)或`Proxy`(在ES2015+环境中)对数据进行劫持,当数据发生变化时触发视图更新;同时通过监听DOM事件(如`input`事件)捕获用户输入并更新数据[^3]。 ### 总结 Vue中的单项数据流和双向绑定各有优劣。单项数据流提供更清晰的数据流动方向,便于维护和调试;而双向绑定则简化了开发流程,尤其适用于表场景。开发者应根据实际需求选择合适的方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值