1
const data = {
2
  name: 'james',
3
  age: 20,
4
 };
5
 const bucket = new WeakMap();
6
 const effectStack = [];
7
 let activeEffect;
8
 const proxy = new Proxy(data, {
9
  // receiver 代表谁在读取对象 可以理解为含义调用过程中的this; 如：p.bar 代表 p在读取bar属性
10
  get(target, key, receiver) {
11
   track(target, key);
12
   // 这里的this实际是原始对象data, target[key]访问无法建立响应联系
13
   // return target[key];
14
   return Reflect.get(target, key, receiver);
15
  },
16
  set(target, key, newVal, receiver) {
17
   // target[key] = newVal;
18
   const res = Reflect.set(target, key, newVal, receiver);
19
   trigger(target, key);
20
   return res;
21
  },
22
 });

1
function track(target, key, receiver) {
2
  if (!activeEffect) return Reflect.get(target, key, receiver);
3
  // **解决**：响应式数据与副作用函数之间建立更加精确的联系
4

5
  // 根据 target 从“桶”中取得 depsMap，它也是一个 Map 类型：key -->effects;
6
  let depsMap = bucket.get(target);
7
  // 如果不存在depsMap 则建立一个map并与target关联
8
  if (!depsMap) {
9
   depsMap = new Map();
10
   bucket.set(target, depsMap);
11
  }
12
  // 根据key从depsMap中取出deps
13
  // 里面存储着所有与当前 key 相关联的副作用函数：effects
14
  let deps = depsMap.get(key);
15
  // 如果 deps 不存在，同样新建一个 Set 并与 key 关联
16
  if (!deps) {
17
   deps = new set();
18
   depsMap.set(key, deps);
19
  }
20
  // 最后将当前激活的副作用函数添加到“桶”里
21
  deps.add(activeEffect);
22
  // deps 就是一个与当前副作用函数存在联系的依赖集合
23
  // 将其添加到 activeEffect.deps 数组中
24
  activeEffect.deps.push(deps);
25
 }

1
function trigger(target, key) {
2
  const depsMap = bucket.get(target);
3
  if (!depsMap) return;
4
  const effects = depsMap.get(key);
5
  const effectsToRun = new set();
6
  effects?.forEach(effectFn => {
7
   // 解决: 副作用函数无限递归地调用自身，导致栈溢出的问题
8
   // 如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行
9
   if (effectFn !== activeEffect) {
10
    // 新增
11
    effectsToRun.add(effectFn);
12
   }
13
  });
14
  effectsToRun.forEach(effectFn => {
15
   //**解决**：当trigger 动作触发副作用函数重新执行时，有能力决定副作用函数执行的时机、次数以及方式(响应系统的可调度性)
16
   // 如果一个副作用函数存在调度器，则调用该调度器，并将副作用函数作为参数传递;
17
   if (effectFn.options.scheduler) {
18
    effectFn.options.scheduler(effectFn);
19
   } else {
20
    effectFn();
21
   }
22
  });
23
 }

1
function effect(fn, options = {}) {
2
  const effectFn = () => {
3
   // **解决**：分支切换导致的冗余副作用的问题，会导致副作用函数进行不必要的更新
4
   cleanup(effectFn);
5

6
   // 当 effectFn 执行时，将其设置为当前激活的副作用函数
7
   activeEffect = effectFn;
8
   // **解决**： 嵌套的副作用函数的问题(父子组件)。响应式数据与副作用函数之间建立的响应联系发生错乱。
9
   // 在调用副作用函数之前将当前副作用函数压入栈中
10
   effectStack.push(effectFn);
11
   const res = fn();
12
   // 在当前副作用函数执行完毕后，将当前副作用函数弹出栈，并把 activeEffect 还原为之前的值
13
   effectStack.pop();
14
   activeEffect = effectStack[effectStack.length - 1];
15
   return res;
16
  };
17

18
  effectFn.options = options;
19
  // activeEffect.deps 用来存储所有与该副作用函数相关联的依赖集合
20
  effectFn.deps = [];
21
  if (!options.lazy) {
22
   // 执行副作用函数
23
   effectFn();
24
  }
25
  // 被标记为懒执行的副作用函数可以通过手动方式让其执行
26
  return effectFn;
27
 }
28

29
 function cleanup(effectFn) {
30
  for (let i = 0; i < effectFn.deps.length; i++) {
31
   // deps 是依赖集合
32
   const deps = effectFn.deps[i];
33
   // 将 effectFn 从依赖集合中移除
34
   deps.delete(effectFn);
35
  }
36
  effectFn.deps.length = 0;
37
 }

1
// 定义一个任务队列
2
 const jobQueue = new Set();
3
 const p = Promise.resolve();
4
 let isFlushing = false;
5
 function flushJob() {
6
  if (isFlushing) return;
7
  isFlushing = true;
8
  p.then(() => {
9
   // 在微任务队列中刷新任务队列
10
   jobQueue.forEach(job => job());
11
  }).finally(() => {
12
   isFlushing = false;
13
  });
14
 }
15
 effect(
16
  () => {
17
   console.log(123);
18
  },
19
  {
20
   scheduler(fn) {
21
    // 每次调度时，将副作用函数添加到jobQueue队列中
22
    jobQueue.add(fn);
23
    // 刷新队列
24
    flushJob();
25
   },
26
   lazy: false,
27
  }
28
 );

1
function computed(getter) {
2
  let value;
3
  let dirty = true;
4
  const effectFn = effect(getter, {
5
   // 当计算属性依赖的响应式数据发生变化时，会通过 scheduler 将 dirty 标记设置为 true，代表“脏”。
6
   // 下次读取计算属性的值时，会重新计算真正的值。
7
   scheduler() {
8
    if (!dirty) {
9
     dirty = true;
10
     trigger(obj, value);
11
    }
12
   },
13
   lazy: true,
14
  });
15

16
  const obj = {
17
   get value() {
18
    if (dirty) {
19
     // 当读取计算属性的值时，只需要手动执行副作用函数
20
     value = effectFn();
21
     dirty = false;
22
    }
23
    track(obj, 'value');
24
    return value;
25
   },
26
  };
27

28
  return obj;
29
 }

1
function watch(source, cb, options = {}) {
2
  let getter;
3
  // 如果 source 是函数，说明用户传递的是 getter，所以直接把 source 赋值给 getter
4
  if (typeof source === 'function') {
5
   getter = source;
6
  } else {
7
   getter = () => traverse(source);
8
  }
9
  let oldValue, newValue;
10
  let cleanup;
11

12
  // **解决**： 过期的副作用函数，导致竞态问题。
13
  function onInvalidate(fn) {
14
   // 将过期回调存储到cleanup中
15
   cleanup = fn;
16
  }
17

18
  const job = () => {
19
   // 在scheduler 中重新执行副作用函数，得到的是新值
20
   newValue = effectFn();
21
   // 将新值和旧值作为回调函数的参数
22
   cb(newValue, oldValue, onInvalidate);
23
   // 更新旧值，不然下一次会得到错误的旧值
24
   oldValue = newValue;
25
  };
26
  const effectFn = effect(() => getter(), {
27
   lazy: true,
28
   scheduler: () => {
29
    // 在调度函数中判断flush是否为post， 如果是，将其放到微任务队列中执行
30
    if (options.flush === 'post') {
31
     const p = Promise.resolve();
32
     p.then(job);
33
    } else {
34
     job();
35
    }
36
   },
37
  });
38
  if (options.immediate) {
39
   // 当immediate 为true时立即执行job，从而触发回调执行
40
   job();
41
  } else {
42
   // 手动调用副作用函数，得到的值就是旧值
43
   oldValue = effectFn();
44
  }
45
 }
46

47
 function traverse(value, seen = new Set()) {
48
  // 如果要读取的数据是原始值，或者已经被读取过了，那么什么都不做
49
  if (typeof value !== 'object' || value === null || seen.has(value)) return;
50
  // 将数据添加到seen中，代表遍历读取过了，避免循环引用引起的死循环
51
  seen.add(value);
52
  // 假设 value 就是一个对象，使用 for...in 读取对象的每一个值，并递归地调用 traverse 进行处理
53
  for (const key in value) {
54
   traverse(value[k], seen);
55
  }
56
  return value;
57
 }