Vue3 源码中 Reactivity 浅析

1
import {
2
  mutableHandlers,
3
  readonlyHandlers,
4
  shallowReadonlyHandlers,} from "./baseHandlers";
5
...
6
export function reactive(target) {
7
  return createReactiveObject(target, reactiveMap, **mutableHandlers**);
8
}
9

10
export function readonly(target) {
11
  return createReactiveObject(target, readonlyMap, readonlyHandlers);
12
}
13

14
export function shallowReadonly(target) {
15
  ...
16
}
17
function createReactiveObject(target, proxyMap, baseHandlers) {
18
...
19
  const proxy = new Proxy(
20
    target,
21
    **baseHandlers**
22
  )
23
...

1
const get = createGetter();
2
const set = createSetter();
3
createGetter(isReadonly = false, shallow = false) {
4
  // 返回get函数
5
  return function get(target, key, receiver){
6
    ...
7
    const res = Reflect.get(target, key, receiver);
8
    ...
9
    // 返回通过Reflect.get的值
10
    return res
11
  }
12
}
13
function createSetter() {
14
  // 返回set函数
15
  return function set(target, key, value, receiver) {
16
    const result = Reflect.set(target, key, value, receiver);
17

18
    // 在触发 set 的时候进行触发依赖
19
    trigger(target, "set", key);
20

21
    return result;
22
  };
23
}
24
// 导出给reactive中createReactiveObject作为第二个入参
25
export const mutableHandlers = {
26
  get,
27
  set,
28
};

1
const get = createGetter();
2
function createGetter(isReadonly = false, shallow = false) {
3
  return function get(target, key, receiver) {
4
    ...
5
    const res = Reflect.get(target, key, receiver);
6

7
    // 问题：为什么是 readonly 的时候不做依赖收集呢
8
    // readonly 的话，是不可以被 set 的， 那不可以被 set 就意味着不会触发 trigger
9
    // 所有就没有收集依赖的必要了
10
    if (!isReadonly) {
11
      // 在触发 get 的时候进行依赖收集
12
      track(target, "get", key);
13
    }
14
    ...
15
    return res;
16
  };
17
}

1
export function track(target, type, key) {
2
  ...
3
  console.log(`触发 track -> target: ${target} type:${type} key:${key}`);
4
  // 1. 先基于 target 找到对应的 dep
5
  // 如果是第一次的话，那么就需要初始化
6
  let depsMap = targetMap.get(target);
7
  if (!depsMap) {
8
    // 初始化 depsMap 的逻辑
9
    depsMap = new Map();
10
    targetMap.set(target, depsMap);
11
  }
12
  // 作为容器收集依赖
13
  let dep = depsMap.get(key);
14

15
  if (!dep) {
16
    dep = createDep();
17
    depsMap.set(key, dep);
18
  }
19

20
  trackEffects(dep);
21
}

1
export function trigger(target, type, key) {
2
  // 1. 先收集所有的 dep 放到 deps 里面，
3
  // 后面会统一处理
4
  let deps: Array<any> = [];
5
  // dep
6
  const depsMap = targetMap.get(target);
7

8
  if (!depsMap) return;
9

10
  // 暂时只实现了 GET 类型
11
  // get 类型只需要取出来就可以
12
  const dep = depsMap.get(key);
13

14
  // 最后收集到 deps 内
15
  deps.push(dep);
16

17
  const effects: Array<any> = [];
18
  deps.forEach((dep) => {
19
    // 这里解构 dep 得到的是 dep 内部存储的 effect
20
    effects.push(...dep);
21
  });
22
  // 这里的目的是只有一个 dep ，这个dep 里面包含所有的 effect
23
  // 这里的目前应该是为了 triggerEffects 这个函数的复用
24
  triggerEffects(createDep(effects));
25
}
26
export function triggerEffects(dep) {
27
  // 执行收集到的所有的 effect 的 run 方法
28
  for (const effect of dep) {
29
    if (effect.scheduler) {
30
      // scheduler 可以让用户自己选择调用的时机
31
      // 这样就可以灵活的控制调用了
32
      effect.scheduler();
33
    } else {
34
      effect.run();
35
    }
36
  }
37
}