7.13 对象检测异常

我们在实际开发中经常遇到一种场景，对象test: { a: 1 }要添加一个属性b,这时如果我们使用test.b = 2的方式去添加，这个过程Vue是无法检测到的，理由也很简单。我们在对对象进行依赖收集的时候，会为对象的每个属性都进行收集依赖，而直接通过test.b添加的新属性并没有依赖收集的过程，因此当之后数据b发生改变时也不会进行依赖的更新。

了解决这一问题，Vue提供了Vue.set(object, propertyName, value)的静态方法和vm.$set(object, propertyName, value)的实例方法，我们看具体怎么完成新属性的依赖收集过程。

  1. Vue.set = set
  2. function set (target, key, val) {
  3.     //target必须为非空对象
  4.     if (isUndef(target) || isPrimitive(target)
  5.     ) {
  6.       warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target))));
  7.     }
  8.     // 数组场景，调用重写的splice方法，对新添加属性收集依赖。
  9.     if (Array.isArray(target) && isValidArrayIndex(key)) {
  10.       target.length = Math.max(target.length, key);
  11.       target.splice(key, 1, val);
  12.       return val
  13.     }
  14.     // 新增对象的属性存在时，直接返回新属性，触发依赖收集
  15.     if (key in target && !(key in Object.prototype)) {
  16.       target[key] = val;
  17.       return val
  18.     }
  19.     // 拿到目标源的Observer 实例
  20.     var ob = (target).__ob__;
  21.     if (target._isVue || (ob && ob.vmCount)) {
  22.       warn(
  23.         'Avoid adding reactive properties to a Vue instance or its root $data ' +
  24.         'at runtime - declare it upfront in the data option.'
  25.       );
  26.       return val
  27.     }
  28.     // 目标源对象本身不是一个响应式对象，则不需要处理
  29.     if (!ob) {
  30.       target[key] = val;
  31.       return val
  32.     }
  33.     // 手动调用defineReactive，为新属性设置getter,setter
  34.     defineReactive###1(ob.value, key, val);
  35.     ob.dep.notify();
  36.     return val
  37.   }

按照分支分为不同的四个处理逻辑：

  1. 目标对象必须为非空的对象，可以是数组，否则抛出异常。
  2. 如果目标对象是数组时，调用数组的splice方法，而前面分析数组检测时，遇到数组新增元素的场景，会调用ob.observeArray(inserted)对数组新增的元素收集依赖。
  3. 新增的属性值在原对象中已经存在，则手动访问新的属性值，这一过程会触发依赖收集。
  4. 手动定义新属性的getter,setter方法，并通过notify触发依赖更新。