Dep-Watcher深入

Dep

• 它的实例什么时候创建？
  Observer
  初始化的给data的属性进行数据劫持时创建的。

  
  dep-watcher.png

• 个数？
  与data中的属性一一对应（所有的属性）
  例如：

      {
      name: "xx",         // dep:{id:1,subs:[]}
      wife: {             // dep:{id:2,subs:[]}
          name:"yy",      // dep:{id:3,subs:[]}
          age: 28         // dep:{id:4,subs:[]}
      }
  }
  // 4 个 dep
  

• Dep的结构？
  id:
  subs:[watcher,watcher... ] n个相关的watcher的容器对象

Watcher

• 它的实例什么时候创建？
  编译过程 Complie 中
  初始化的解析大括号表达式/一般指令时创建

  dep-watcher2.jpg

• 个数？

  与模板中表达式（不包含事件指令）一一对应

  <div id="test">
      <p>{{name}}</p>                        <!--{exp: name, depIds:{ }  }  -->
      <p v-text="name"></p>
      <button v-on:click="update">更新</button>
  </div>
  <!-- 2 个 watcher  -->
  

• Watcher结构？

    this.cb = cb;//用于更新界面的回调函数
    this.vm = vm;//vm
    this.exp = exp;//对应的表达式
    this.depIds = {
        "0": new Dep()
    };//相关的n个dep的容器对象
    this.value = this.get();//当前表达式对应的value
  

Dep与Watcher之间的关系？

• 什么关系？

    多对多的关系
    data属性 --> Dep --> n个watcher (模板中有多个表达式使用了此属性: {{a}} v-text="a")
    表达式(不包含事件指令) --> Watcher --> n个Dep(多层表达式：a.b.c)
  

• 如何建立的？
  初始化过程 先执行observer这个过程 =》 new Dep()
  后执行 compile 过程 =》 new Watcher
  所以建立关系 是在 compile过程之后的

  dep-watcher3.png

整体流程

整体流程图.png