双向数据绑定

什么是双向数据绑定

数据模型和视图之间的双向绑定。

当数据发生改变的时候，视图也发送改变，当视图发送改变，数据也会跟着发生改变，就是在单向绑定的基础上给可输入元素（input，textarea）等，添加了change(input)事件，动态修改view 和 model。

实现双向数据绑定的方法

实现数据绑定的做法：

• 发布者-订阅者模式（backbone.js）
  • 通过sub,pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value);
• 脏值检查（angular.js）
  • 通过脏值检查的方式对比数据是否有变化，从而决定是否更新视图，最简单的方式是通过setInterval()定时轮询检查数据变动，angular只有在指定的时间触发时进入脏值检查，如下：
    • DOM事件，譬如用户输入文本，点击按钮等（ng-click）
    • XHR响应事件（$http）
    • 浏览器Location变更事件（$location）
    • Timer事件（$timeout,$interval）
    • 执行$digest() 或$apply()
• 数据劫持（vue.js）
  • vue采用数据劫持结合发布者-订阅者模式的方式，通过Objeact.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调。
  • Observer: 劫持监听所有属性
    • 数据变化 => 通知Dep订阅器 => Dep订阅器通知对应Watcher更新相应视图
  • Dep: 订阅器
    • 存储多个订阅者
    • 通知Watcher更新视图
  • Compile：解析指令