MVVM（三）数据劫持-->数据绑定

1.数据绑定(model==>View):

       (1). 一旦更新了data中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会更新(更新)
    2.数据劫持
    (1). 数据劫持是vue中用来实现数据绑定的一种技术
    (2). 基本思想: 通过defineProperty()来监视data中所有属性(任意层次)数据的变化, 一旦变化就去更新界面
    3.四个重要对象
        (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()
          * 消息订阅与发布