vue2源码（六）-- 响应式数据

原理分析

• 首先是调用 observe 函数

1、如果value值不是对象，或者是一个 vnode 对象，那么就退出函数

2、如果value对象上面如果有__ob__属性，说明这个数据已经被监听过了。如果没有，则实例化Observer类，将数据变成响应式数据

3、返回Observer实例对象

• Observer 构造函数初始化

1、首先保存value值到实例上面，并且初始化一个Dep实例，用来收集依赖

2、给value数据添加一个__ob__属性，值为，当前实例。用来标识这个数据已经被转化为响应数据，避免重复操作

3、如果是一个数组数据，如果有__proto__属性，就将__proto__修改为重写数组方法的对象中。如果没有__proto__属性，就会将重写数组方法直接挂载到数组数据中。最后循环数组的数组的每一项，吧数组的每一项也变成响应式数据

4、如果是一个对象，就回通过遍历对象上面的key-val值，调用defineReactive吧数据变成响应式数据

• defineReactive 函数

1、首先初始化一个Dep实例，用来收集依赖

2、获取对象的描述符对象，判断configurable是否为 false，是就退出函数

3、然后根据第五个参数，决定是否需要递归监听数据

4、使用Object.defineProperty，添加getter函数和setter函数，getter 函数中负责收集依赖(watcher)，setter函数中负责通知更新。同时 setter 函数中，新设置的值也会根据第五个参数，决定是否需要递归监听新设置的值。

5、getter 函数收集依赖的过程。在初始化watcher实例的时候，会立刻调用watcher实例上的get函数，get 函数会把自身的实例挂载到全局唯一的位置，也就会Dep.target上，然后在根据传进来的表达式读取一次值，触发数据的getter函数，getter 函数就会把这个全局唯一的 watcher 实例收集到依赖管理器中。最后移除这个全局唯一的实例。

• arrayMethods 对象

1、通过Object.create方法创建一个原型指向数组的prototype的 arrayMethods 对象

2、重写数组的 7 个方法，分别为push，pop，shift，unshift，splice，sort，reverse，并添加到 arrayMethods 对象上

3、以 push 方法为例。首先缓存原生的 push 方法，然后再 arrayMethods 对象中添加 push 方法，方法内部首先是调用原生的 push 方法，然后获取 push 插入的数据，也转化为响应式数据，最后通过this.__ob__获取 observer 实例，通知更新，并返回原生 push 方法执行的结果

当数组调用 push 方法的时候，通过原型链查找，最先找到的是 arrayMethods 对象的 push 方法，对于 findIndex 等方法，不在 arrayMethods 对象上，就会通过原型链继续往上查找

源码

源码位于src/core/observer/index.js

observe 函数：

export function observe(value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return;
  }
  let ob: Observer | void;
  if (hasOwn(value, "__ob__") && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else if (
    // ...
  ) {
    ob = new Observer(value);
  }
  // ...
  return ob;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Observer类：

// Observer类通过递归把对象上面的所有属性都转化为响应式数据
export class Observer {
  value: any;
  dep: Dep;

  constructor(value: any) {
    this.value = value;
    this.dep = new Dep();
    // 添加一个标记，标识这个数据已经被转化为响应式数据了，避免重复操作
    def(value, "__ob__", this);
    if (Array.isArray(value)) {
      // value是数组时候的逻辑
      if (hasProto) {
        // 修改原型链的指向
        value.__proto__ = arrayMethods;
      } else {
        // 对象上面不存在__proto__，就直接挂在到数组上面
        for (let i = 0, l = arrayKeys.length; i < l; i++) {
          const key = arrayKeys[i];
          def(value, key, arrayMethods[key]);
        }
      }
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  }

  //  把对象转化为响应式
  walk(obj: Object) {
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i]);
    }
  }

  //   把数组转化为响应式
  observeArray(items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i]);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

defineReactive函数：

// 把数据转化为响应式数据
export function defineReactive(obj: Object, key: string, val: any) {
  // 实例化一个依赖管理器
  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) {
    // 参数只给了obj和key的情况
    val = obj[key];
  }

  let childOb = observe(val);
  Object.defineProperty(obj, key, {
    // 可遍历
    enumerable: true,
    // 可操作性
    configurable: true,
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val;
      // Dep.target指的是`Watcher`实例
      if (Dep.target) {
        // getter中收集依赖
        dep.depend();
        if (childOb) {
          childOb.dep.depend();
          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 (getter && !setter) return;
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      childOb = observe(newVal);
      // setter中通知更新
      dep.notify();
    },
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

src/core/observer/array.js

数组改写

const arrayProto = Array.prototype;

// 创建一个对象作为拦截器
export const arrayMethods = Object.create(arrayProto);

// 需要重写数组的7个方法
const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
];

methodsToPatch.forEach(function (method) {
  // 缓存原生方法
  const original = arrayProto[method];
  def(arrayMethods, method, function mutator(...args) {
    const result = original.apply(this, args);
    // 获取数组的__ob__，也就是observer类
    const ob = this.__ob__;
    let inserted;
    // push,unshift,splice会插入新对象
    switch (method) {
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
    }
    if (inserted) ob.observeArray(inserted);
    //通知更新
    ob.dep.notify();
    return result;
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40