html单向绑定,单向数据绑定【单向数据流】与双向数据绑定【双向数据流】

单向数据绑定

单向数据绑定，带来单向数据流。。

指的是我们先把模板写好，然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。适用于整体项目，并于追溯。

优点：

1. 所有状态的改变可记录、可跟踪，源头易追溯;

2. 所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性;

3. 一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data);

4. 如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。

方神：双向绑定 = 单向绑定 + UI事件监听，可了解vuex

缺点：

1. HTML代码渲染完成，无法改变，有新数据，就须把旧HTML代码去掉，整合新数据和模板重新渲染;

2. 代码量上升，数据流转过程变长，出现很多类似的样板代码;

3. 同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。

双向数据绑定

双向数据绑定，带来双向数据流。AngularJS2添加了单向数据绑定

数据模型(Module)和视图(View)之间的双向绑定。无论数据改变，或是用户操作，都能带来互相的变动，自动更新。适用于项目细节，如：UI控件中(通常是类表单操作)。

优点：

1. 用户在视图上的修改会自动同步到数据模型中去，数据模型中值的变化也会立刻同步到视图中去；

2. 无需进行和单向数据绑定的那些CRUD(Create，Retrieve，Update，Delete)操作；

3. 在表单交互较多的场景下，会简化大量业务无关的代码。

缺点：

1. 无法追踪局部状态的变化；

2. “暗箱操作”，增加了出错时 debug 的难度；

3. 由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱，若再缺乏“管制”手段，血崩。

双向数据绑定，Angular使用脏检查“digest” - “dirty checking”

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

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.