Vue2 中 Observer 一些探究

Observer

我们在打断点的时候会发现在遍历对象的时候会重新new Observer，而且这个Observer拥有自己的dep对象，既然我们都能对数据进行监控，为啥还需要Dep这个东西呢

先说结论，其实这个是为了我们新增数据如 $set 和 数组操作来实现将新数据绑定的

我们想想 如果一个数据是新进来的，他是不会之前initData的时候将数据进行双向绑定的，那么我们怎么能够通过Dep通过notify来提醒视图更新呢，这时候我们想起来Dep的作用，但是新数据没有Dep，怎么通过Dep的notify来提示数据改变呢。

1. Vue的实现方法是通过判断子对象为obj的时候，在observer()的时候为数据添加一个dep和定义自己的__ob__属性

// new 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;
    // 实例化一个 Dep
    this.dep = new Dep();
    this.vmCount = 0;
    // 定义一个__ob__ 属性
    def(value, "__ob__", this);
    //... 省略下面一些东西
 }
}

2. 在遍历对象的时候，如果是对象的话给对象自己new Observer()然后配上自己的Dep

export function defineReactive(
  obj: Object,
  key: string,
  val: any,
  customSetter ? : ? Function,
  shallow ? : boolean
) {
 //... 省略一些东西
 // 判断val是否是对象，如果是对象给对象new observer()和付给一个dep对象
 // 这个childOb 就是为了绑定相对应的dep 相当于我在外面加了一个Dep，如果有新数据自己通过它相应Watcher
  let childOb = !shallow && observe(val);
 //... 省略一些东西
}

3. 通过上诉两个过程的执行，最后达成的目的就是每个对象都有自己的__ob__和dep属性
4. 在使用数据的时候 会通过get的方法 会通过childOb.dep 来添加Wacher

if (childOb) {
          // 对象中嵌套对象的观察者对象，如果存在也对其进行依赖收集
          childOb.dep.depend();
          //... 处理其他
}

5. 这时候我们看看set和delete方法,都是通过__ob__ 这个元素拿到dep来进行notify的

export function set(target: Array < any > | Object, key: any, val: any): any {
  if (
    process.env.NODE_ENV !== "production" &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(
      `Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`
    );
  }

  // 如果 target 是数组，利用数组的 splice 变异方法触发响应式
  // Vue.set([1,2,3], 1, 5)
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免数组索引 key 大于数组长度导致 splcie() 执行有误
    target.length = Math.max(target.length, key);

    target.splice(key, 1, val);
    return val;
  }

  // 如果 key 已经存在 target 中，更新 target[key] 的值为 val
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }

  // 读取一下 target.__ob__，这个主要用来判断 target 是否是响应式对象
  const ob = (target: any).__ob__;

  // 需要操作的目标对象不能是 Vue 实例或 Vue 实例的根数据对象
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== "production" &&
      warn(
        "Avoid adding reactive properties to a Vue instance or its root $data " +
        "at runtime - declare it upfront in the data option."
      );
    return val;
  }

  // 当 target 不是响应式对象，并且对象本身不存在这个新属性 key
  // 新属性会被设置，但是不会做响应式处理
  if (!ob) {
    target[key] = val;
    return val;
  }

  // target 是响应式对象，并且对象本身不存在这个新属性 key
  // 给对象定义新属性，通过 defineReactive 方法将新属性设置为响应式
  // ob.dep.notify 通知更新
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;
}

/**
 * Delete a property and trigger change if necessary.
 */
// 通过 Vue.delete 或 vm.$delete 将 target 的 key 属性删除
export function del(target: Array < any > | Object, key: any) {
  if (
    process.env.NODE_ENV !== "production" &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(
      `Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`
    );
  }

  // 如果 target 是数组，通过数组的变异方法 splice 删除对应对应的 key 项，并且触发响应式更新
  // Vue.delete([1,2,3], 1)
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1);
    return;
  }

  // 读取一下 target.__ob__，这个主要用来判断 target 是否是响应式对象
  const ob = (target: any).__ob__;

  // 需要操作的目标对象不能是 Vue 实例或 Vue 实例的根数据对象
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== "production" &&
      warn(
        "Avoid deleting properties on a Vue instance or its root $data " +
        "- just set it to null."
      );
    return;
  }
  // 如果 target 上不存在 key 属性，直接结束
  if (!hasOwn(target, key)) {
    return;
  }
  // 直接通过 delete 删除对象的 key 项
  delete target[key];
  // target 不是响应式对象，不需要通知更新
  if (!ob) {
    return;
  }
  // target 是响应式，通知更新
  ob.dep.notify();
}

6. 而且数组的更新其实也是用了这一点,vue会重新定义数组的7中方法

methodsToPatch.forEach(function (method) {
  // 缓冲原始数组的方法
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator(...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    // push 和 unshfit 和 splice 都会插入新元素，其中splice的第二个参数开始表示插入的元素值
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args // 比如：args 是 [{...}]
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 对插入的元素进行响应式处理
    if (inserted) ob.observeArray(inserted)

    // 通过 dep.notify 通知更新
    ob.dep.notify()
    return result
  })
})

重点

1. 给每个对象一个Dep和__ob__
2. 而且这个对象是通过childobj给上一级
3. childobj是为了让每个对象都能够拥有上一级get的时候拥有的Watcher,这个时候__ob__中Dep也就用了Watcher了
4. 新增元素的时候我们可以通过这个__ob__的Dep来notify是视图发生改变等操作

逻辑很绕，如果大佬有妥当的描述，欢迎指出相关错误以及描述点 😆😆