vue源码解读

//  observe方法返回一个Observer实例

let ob: Observer | void
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = value.__ob__    //   如果data中有observe就用本来有的
} else if (
      shouldObserve &&
      !isServerRendering() &&
      (Array.isArray(value) || isPlainObject(value)) &&
      Object.isExtensible(value) &&
      !value._isVue
) {
      ob = new Observer(value)  //  如果没有就new一个Observer观察者实例
}
return ob   //  返回观察者

//  Observer类根据数据类型做数据响应化
export class Observer {
      value: any;
      dep: Dep;
      vmCount: number; // number of vms that have this object as root $data
      constructor (value: any) {
            this.value = value
            this.dep = new Dep()
            this.vmCount = 0
            def(value, '__ob__', this)
            //  覆盖数组原型
            if (Array.isArray(value)) {
                  if (hasProto) {
                       //  替换数组原型 value.__proto__ = arraryMethods
                        protoAugment(value, arrayMethods)
                  } else {
                        copyAugment(value, arrayMethods, arrayKeys)
                  }
                  this.observeArray(value)
            } else {
                  this.walk(value)
            }
      }
      //   如果data是对象的处理方法
      walk (obj: Object) {
            const keys = Object.keys(obj)
            for (let i = 0; i < keys.length; i++) {
                  defineReactive(obj, keys[i])
            }
      }
      //  如果data是数组的处理方法
      observeArray (items: Array<any>) {
            for (let i = 0, l = items.length; i < l; i++) {
                  observe(items[i])
            }
      }
} 

//  defineReactive方法定义对象属性的getter/setter方法，getter添加依赖，setter通知更新

const dep = new Dep()
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
      return
}
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
     val = obj[key]  // 一个key对应一个Dep实例
}
//  递归执行子对象响应化
let childOb = !shallow && observe(val)
//  定义对象属性的getter/setter
Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
            const value = getter ? getter.call(obj) : val
            if (Dep.target) {
                  dep.depend()  //  getter被调用的时如果存在依赖就追加
                  if (childOb) {
                        childOb.dep.depend()  //  若也存在子Observer，则依赖也追加到子ob
                        if (Array.isArray(value)) {
                              dependArray(value)  //  数组的处理方式
                        }
                  }
            }
            return value
       },
       set: function reactiveSetter (newVal) {
             const value = getter ? getter.call(obj) : val
             if (newVal === value || (newVal !== newVal && value !== value)) {
                   return
             }
             if (process.env.NODE_ENV !== 'production' && customSetter) {
                   customSetter()
             }
             if (getter && !setter) return
              // 如果值变了就更新值
             if (setter) {
                   setter.call(obj, newVal)
             } else {
                   val = newVal
             }
             childOb = !shallow && observe(newVal)  //  递归更新子对象
             dep.notify()  //  通知更新
       }
})
//  数组的所有项添加依赖，数据变化的时候就可以通过__ob__.dep发送通知
function dependArray (value: Array<any>) {
      for (let e, i = 0, l = value.length; i < l; i++) {
            e = value[i]
            e && e.__ob__ && e.__ob__.dep.depend()
            if (Array.isArray(e)) {
                  dependArray(e)
             }
       }
}