vue源码解析---data，Observer，Dep，Watcher之间的关系

上图截自《深入浅出vue.js》。

对于上图的描述：通过Observer类提供的方法，将data转化为具有getter以及setter的数据。并在getter中收集依赖装在Dep中，Dep中装的是Watcher实例。当外界发生变化的时候，通知Watcher重新渲染视图。

（1）Observer怎么将data转化为getter以及setter？

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number;  

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    // 定义一个__ob__属性
    def(value, '__ob__', this)
    if (Array.isArray(value)) {  // 数组的处理,将拦截之后的数组方法往数组
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.