数据绑定原理

一、数据单向绑定原理
指先把模板写好，然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码，最后把这段HTML代码插入到文档流里。
缺点：一旦HTML代码生成就没有办法改变，如果有新数据重新传入，就必须重新把模板和数据整合到一起插入到文档流中。
1、拼接字符串
2、前端模板引擎

3、react实现

通过Virtual DOM 算法检查DOM的变动的刷新机制。

二、数据双向绑定原理
指数据模型和视图之间的双向绑定，用户在视图上的修改会自动同步到数据模型中，同样的，如果数据模型中的值发生变化，也会同步到视图中去。
优点：无需进行类似单向数据绑定的操作。
缺点：应用场景有限，最常用的场景是表单。
1、js原生实现
手动绑定。

2、vue实现
结合订阅者发布者设计模式(观察者模式)，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
3、angular实现
手动绑定，在指定的事件触发时(比如dom事件，xhr响应事件，浏览器定位变更事件，定时器事件)，通过脏值检测的方式循环监听，比对数据是否有变更，来决定是否更新视图。

转载于:https://www.cnblogs.com/camille666/p/twoway_databinding.html