一、数据单向绑定原理

指先把模板写好，然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码，最后把这段HTML代码插入到文档流里。

缺点：一旦HTML代码生成就没有办法改变，如果有新数据重新传入，就必须重新把模板和数据整合到一起插入到文档流中。

1、拼接字符串

2、前端模板引擎

3、

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

二、数据双向绑定原理

指数据模型和视图之间的双向绑定，用户在视图上的修改会自动同步到数据模型中，同样的，如果数据模型中的值发生变化，也会同步到视图中去。

优点：无需进行类似单向数据绑定的操作。

缺点：应用场景有限，最常用的场景是表单。

1、

手动绑定。

2、

结合订阅者发布者设计模式(观察者模式)，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

3、

手动绑定，在指定的事件触发时(比如dom事件，xhr响应事件，浏览器定位变更事件，定时器事件)，通过脏值检测的方式循环监听，比对数据是否有变更，来决定是否更新视图。