Vue双向数据绑定

几种实现双向绑定的做法

目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。
实现数据绑定的做法有大致如下几种：

• 发布者-订阅者模式（backbone.js）
• 脏值检查（angular.js）
• 数据劫持（vue.js）

《1》发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是vm.set('property', value)，这里有篇文章讲的比较详细，有兴趣可点这里
这种方式现在毕竟太low了，我们更希望通过 vm.property = value这种方式更新数据，同时自动更新视图，于是有了下面两种方式
《2》脏值检查: angular.js是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval()定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：

• DOM事件，譬如用户输入文本，点击按钮等。( ng-click )

• XHR响应事件 ( $http )

• 浏览器Location变更事件 ( $location )

• Timer事件( $timeout , $interval )

• 执行 $digest() 或 $apply()
  《3》数据劫持: vue.js则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
  思路整理
  已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉defineProperty，猛戳这里
  整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点：

• 数据绑定(model==>View):
  1). 一旦更新了data中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会更新(更新)

• 数据劫持
  1). 数据劫持是vue中用来实现数据绑定的一种技术
  2). 基本思想: 通过defineProperty()来监视data中所有属性(任意层次)数据的变化, 一旦变化就去更新界面

• 四个重要对象
  1). Observer
  * 用来对data所有属性数据进行劫持的构造函数
  * 给data中所有属性重新定义属性描述(get/set)
  * 为data中的每个属性创建对应的dep对象
  2). Dep(Depend)
  * data中的每个属性(所有层次)都对应一个dep对象
  * 创建的时机:
  * 在初始化define data中各个属性时创建对应的dep对象
  * 在data中的某个属性值被设置为新的对象时
  * 对象的结构
  {
  id, // 每个dep都有一个唯一的id
  subs //包含n个对应watcher的数组(subscribes的简写)
  }
  * subs属性说明
  * 当一个watcher被创建时, 内部会将当前watcher对象添加到对应的dep对象的subs中
  * 当此data属性的值发生改变时, 所有subs中的watcher都会收到更新的通知, 从而最终更新对应的界面
  3). Compile
  * 用来解析模板页面的对象的构造函数(一个实例)
  * 利用compile对象解析模板页面
  * 每解析一个表达式(非事件指令)都会创建一个对应的watcher对象, 并建立watcher与dep的关系
  * complie与watcher关系: 一对多的关系
  4). Watcher
  * 模板中每个非事件指令或表达式都对应一个watcher对象
  * 监视当前表达式数据的变化
  * 创建的时机: 在初始化编译模板时
  * 对象的组成
  {
  vm, //vm对象
  exp, //对应指令的表达式
  cb, //当表达式所对应的数据发生改变的回调函数
  value, //表达式当前的值
  depIds //表达式中各级属性所对应的dep对象的集合对象
  //属性名为dep的id, 属性值为dep
  }

  5). 总结: dep与watcher的关系: 多对多
  * 一个data中的属性对应对应一个dep, 一个dep中可能包含多个watcher(模板中有几个表达式使用到了属性)
  * 模板中一个非事件表达式对应一个watcher, 一个watcher中可能包含多个dep(表达式中包含了几个data属性)
  * 数据绑定使用到2个核心技术
  * defineProperty()
  * 消息订阅与发布

• 双向数据绑定
  1). 双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的
  2). 双向数据绑定的实现流程:
  * 在解析v-model指令时, 给当前元素添加input监听
  * 当input的value发生改变时, 将最新的值赋值给当前表达式所对应的data属性

• 数据劫持图