reactive 实现原理#

渐进式实现 vue 的响应式系统

V1 依赖追踪#

1
// 存储副作用的桶
2
const bucket = new WeakMap(); // {target: map} 原始对象： map
3
// 为什么weakmap是弱引用的
4

5
// 存储被注册的副作用函数
6
let activeEffect;
7

8
// 注册副作用函数
9

10
function effect(fn) {
11
  // 当调用effect时 activeEffect被激活
12
  activeEffect = fn;
13
  // 执行副作用
14
  fn();
15
}
16

17
const data = { text: 'hello world', ok: true };
18

19
// 代理原始数据
20
const obj = new Proxy(data, {
21
  get(target, key, receiver) {
22
    track(target, key);
23
    return Reflect.get(target, key, receiver);
24
  },
25
  set(target, key, value, receiver) {
26
    // 先set， 下面获取到的才是新的值
27
    const result = Reflect.set(target, key, value, receiver);
28
    trigger(target, key);
29
    return result;
30
  },
31
});
32

33
// 存储副作用，方便后续追踪
34
function track(target, key) {
35
  // activeEffect 副作用函数没有激活， 直接return
36
  if (!activeEffect) return;
37

38
  // 把target存到桶里去 (先看桶里原来有没有)
39
  let depMap = bucket.get(target);
40
  // 没有，则添加
41
  !depMap && bucket.set(target, (depMap = new Map()));
42
  // 如果有， 则看key
43

44
  // map里存储的 key和 Set
45
  let deps = depMap.get(key);
46
  // 没有， 则添加
47
  !deps && depMap.set(key, (deps = new Set()));
48

49
  // 将当前激活的副作用添加到桶里
50
  deps.add(activeEffect);
51
}
52

53
// 执行副作用 触发变化
54
function trigger(target, key) {
55
  // 同理取出 target对应的map(存放诸多key和effect的map)
56
  const depMap = bucket.get(target);
57
  // 没有就返回
58
  if (!depMap) return;
59

60
  // 取出 key 对应的 set(effect)
61
  const effects = depMap.get(key);
62
  // 遍历执行所有副作用
63
  effects.forEach(fn => fn());
64
}
65

66
effect(() => {
67
  console.log('副作用执行了：', obj.ok ? obj.text : 'not ok');
68
});
69
setTimeout(() => {
70
  obj.ok= false;
71
  obj.text = 'hello reactive'
72
}, 1000);

问题#

一开始 obj.ok 是 true, 读取了 obj.ok 和 obj.text，导

致这两个属性的依赖集合 Set 都收集了这个副作用函数 actviceEffect

1 秒后，obj.ok 改成 false，副作用函数会重新执行

但是副作用里已经不需要读取 obj.text 了，理想情况下，此时修改 obj.text 不应该再触发这个副作用函数。

原因#

obj.text 的依赖集合里还残留着这个函数，导致依赖会被触发，产生了冗余的副作用，会导致副作用函数进行不必要的更新

解决思路#

在每次副作用函数重新执行前，清除上一次建立的响应联系，而当副作用函数重新执行后,会再次建立新的响应联系，新的响应联系不存在冗余副作用问题

V2 分支切换与嵌套处理#

1.修改 effect 函数，给副作用函数挂在一个 deps 数组，用来存储它的所有依赖结合。并在执行前调用 cleanup 进行清理

2.cleanup 中重置 effectFn.deps(多个存放 key 和 Set 的 map 数组)

1
/*
2
  主要流程
3
  1.代理数据
4
  2.执行副作用effect(()=>{xxx})中的()=>{xxx}
5
  3.若副作用中读取响应式数据，触发track 收集依赖（副作用函数也收集到了其关联的Set）
6
  4.若交互修改了响应式数据，触发trigger执行副作用 触发变化
7
  6.清空副作用函数收集到的关联的Set,最后执行fn(因为fn里又有读取响应式数据，所所有先清空依赖再重新收集新的)
8
*/
9

10
// 存储副作用的桶
11
const bucket = new WeakMap(); // {target: map} 原始对象： map
12
// 为什么weakmap是弱引用的
13

14
// 存储被注册的副作用函数
15
let activeEffect;
16

17
// 注册副作用函数
18
function effect(fn) {
19
  const effectFn = () => {
20
    // 清除旧的响应联系  trigger触发effectFn执行
21
    cleanup(effectFn);
22

23
    // effectFn执行时,设置为当前激活的副作用函数
24
    // 将包装好的函数赋值给全局变量
25
    activeEffect = effectFn;
26
    // 执行副作用
27
    fn();
28
  };
29
  // 存储所有与该副作用相关的依赖集合(需要副作用函数自己记住被放到了那个依赖集合Set里)
30
  effectFn.deps = [];
31

32
  // 执行副作用函数
33
  effectFn();
34
}
35

36
const data = { text: 'hello world', ok: true };
37

38
// 主流程第一步：代理原始数据
39
const obj = new Proxy(data, {
40
  get(target, key, receiver) {
41
    track(target, key);
42
    return Reflect.get(target, key, receiver);
43
  },
44
  set(target, key, value, receiver) {
45
    // 先set， 下面获取到的才是新的值
46
    const result = Reflect.set(target, key, value, receiver);
47
    trigger(target, key);
48
    return result;
49
  },
50
});
51

52
// 主流程第三步：收集依赖：存储副作用，方便后续追踪
53
function track(target, key) {
54
  // activeEffect 副作用函数没有激活， 直接return
55
  if (!activeEffect) return;
56

57
  // 把target存到桶里去 (先看桶里原来有没有)
58
  let depMap = bucket.get(target);
59
  // 没有，则添加
60
  !depMap && bucket.set(target, (depMap = new Map()));
61
  // 如果有， 则看key
62

63
  // map里存储的 key和 Set
64
  let deps = depMap.get(key);
65
  // 没有， 则添加
66
  !deps && depMap.set(key, (deps = new Set()));
67

68
  // 将当前激活的副作用添加到桶里
69
  deps.add(activeEffect);
70

71
  // 新增：将当前副作用函数的依赖集合deps（引用地址），添加到effectFn.deps中
72
  activeEffect.deps.push(deps);
73
}
74

75
// 主流程第四步：交互修改了数据，执行副作用 触发变化
76
function trigger(target, key) {
77
  // 同理取出 target对应的map(存放诸多key和effect的map)
78
  const depMap = bucket.get(target);
79
  // 没有就返回
80
  if (!depMap) return;
81

82
  // 取出 key 对应的 set(effect)
83
  const effects = depMap.get(key);
84
  // 遍历执行所有副作用
85
  /*
86
    effects.forEach(fn => fn());
87
    执行fn时，先调用cleanup将函数从Set中删除，
88
    然后执行fn()又触发了track，把fn又重新加回了Set里
89
    原因：如果一个值已经被访问过了，但是这个值被删除并重新添加到集合里，
90
      如果此时forEach遍历没有结束，那么这个值会重新被访问
91
    从列表拿出一个任务-》删除任务-》执行任务-》任务又自己塞回列表末尾-》接着拿任务
92
  */
93
  // 新增： 构造一个新的set集合并遍历，防止无限循环
94
  const effectsToRun = new Set(effects);
95
  effectsToRun.forEach(effectFn => effectFn());
96
}
97

98
// 清理旧的响应联系函数
99
function cleanup(effectFn) {
100
  // effectFn.deps 是多个 key和set的map数组
101
  for (let i = 0; i < effectFn.deps.length; i++) {
102
    // 依赖集合Set (每个具体的set，因为Set是target对应map内对应key的Set引用地址)
103
    const deps = effectFn.deps[i];
104
    // 这里其实就是删除对应依赖集合中的当前副作用函数
105
    deps.delete(effectFn);
106
  }
107
  // 重置effectFn.deps数组  没有使用=[]因为原修改减少gc优化性能
108
  effectFn.deps.length = 0;
109
}
110
//主流程第二步：执行副作用
111
effect(() => {
112
  console.log('副作用执行了：', obj.ok ? obj.text : 'not ok');
113
});
114
setTimeout(() => {
115
  obj.ok = false;
116
  obj.text = 'hello reactive'; // 设置虽然设置text的值，但是因为ok为false，不会读取到text的值，text一直都是旧的，只有在读取到text的时候才会更新
117
}, 1000);

问题#

1.嵌套导致的 activeEffect 被覆盖#

原因#

activeEffect 全局变量存储正在执行的副作用函数，在父子组件嵌套时，内层（子组件）的 activeEffect 执行完后无法及时归还给外层（父组件）的

1
let temp1, temp2;
2

3
// effect1 (模拟父组件)
4
effect(() => {
5
  console.log('effect1 执行');
6

7
  // effect2 (模拟子组件)
8
  effect(() => {
9
    console.log('effect2 执行');
10
    temp2 = obj.bar; // 读取 bar，收集了 effect2
11
  });
12

13
  // 重点：回到 effect1 继续执行
14
  temp1 = obj.foo; // 读取 foo，此时 activeEffect 是谁？
15
});

理想情况：bar 应该收集 effect2，foo 应该收集 effect1。
现实情况：当 effect2 执行完后，activeEffect **依然指向 **effect2。导致 foo 也收集了 effect2。一旦 foo 发生变化，effect2 会重新执行，而 effect1 却再也不会被触发了

解决思路#

引入一个栈结构，在调用副作用函数之前将当前副作用函数压入栈中，当一个副作用函数执行完毕后，将其从栈中弹出，并把 activeEffect 还原为上一个值

1
// 存储副作用的桶
2
const bucket = new WeakMap(); // {target: map} 原始对象： map
3
// 为什么weakmap是弱引用的
4

5
// 存储被注册的副作用函数
6
let activeEffect;
7
// 新增：副作用函数栈
8
const effectStack = [];
9

10
// 注册副作用函数
11
function effect(fn, name = '?') {
12
  const effectFn = () => {
13
    // 清除旧的响应联系  trigger触发effectFn执行
14
    cleanup(effectFn);
15

16
    // effectFn执行时,设置为当前激活的副作用函数
17
    // 1.将包装好的函数赋值给全局变量
18
    activeEffect = effectFn;
19
    effectFn.name= name;
20

21
    // 2.调用之前，将当前副作用函数压入栈中
22
    effectStack.push(effectFn);
23
    // 执行副作用
24
    fn();
25

26
    // 3.执行完毕后，将当前副作用函数从栈中弹出
27
    effectStack.pop();
28
    // 4.将activeEffect 还原为栈顶函数（外层副作用函数）
29
    activeEffect = effectStack[effectStack.length - 1];
30
  };
31
  // 存储所有与该副作用相关的依赖集合(需要副作用函数自己记住被放到了那个依赖集合Set里)
32
  effectFn.deps = [];
33

34
  // 执行副作用函数
35
  effectFn();
36
}
37

38
const data = { text: 'hello world', ok: true, foo: 1, bar: 2 };
39

40
// 主流程第一步：代理原始数据
41
const obj = new Proxy(data, {
42
  get(target, key, receiver) {
43
    track(target, key);
44
    return Reflect.get(target, key, receiver);
45
  },
46
  set(target, key, value, receiver) {
47
    // 先set， 下面获取到的才是新的值
48
    const result = Reflect.set(target, key, value, receiver);
49
    trigger(target, key);
50
    return result;
51
  },
52
});
53

54
// 主流程第三步：收集依赖：存储副作用，方便后续追踪
55
function track(target, key) {
56
  // activeEffect 副作用函数没有激活， 直接return
57
  if (!activeEffect) return;
58

59
  // 把target存到桶里去 (先看桶里原来有没有)
60
  let depMap = bucket.get(target);
61
  // 没有，则添加
62
  !depMap && bucket.set(target, (depMap = new Map()));
63
  // 如果有， 则看key
64

65
  // map里存储的 key和 Set
66
  let deps = depMap.get(key);
67
  // 没有， 则添加
68
  !deps && depMap.set(key, (deps = new Set()));
69

70
  // 将当前激活的副作用添加到桶里
71
  deps.add(activeEffect);
72

73
  // 将当前副作用函数的依赖集合deps（引用地址），添加到effectFn.deps中
74
  activeEffect.deps.push(deps);
75

76
  console.log(`  [track] 读取 "${key}" → 当前 activeEffect = ${activeEffect.name?? '?'}`);
77
}
78

79
// 主流程第四步：交互修改了数据，执行副作用 触发变化
80
function trigger(target, key) {
81
  // 同理取出 target对应的map(存放诸多key和effect的map)
82
  const depMap = bucket.get(target);
83
  // 没有就返回
84
  if (!depMap) return;
85

86
  // 取出 key 对应的 set(effect)
87
  const effects = depMap.get(key);
88
  // 遍历执行所有副作用
89
  /*
90
    effects.forEach(fn => fn());
91
    执行fn时，先调用cleanup将函数从Set中删除，
92
    然后执行fn()又触发了track，把fn又重新加回了Set里
93
    原因：如果一个值已经被访问过了，但是这个值被删除并重新添加到集合里，
94
      如果此时forEach遍历没有结束，那么这个值会重新被访问
95
    从列表拿出一个任务-》删除任务-》执行任务-》任务又自己塞回列表末尾-》接着拿任务
96
  */
97
  // 构造一个新的set集合并遍历，防止无限循环
98
  const effectsToRun = new Set(effects);
99
  effectsToRun.forEach(effectFn => effectFn());
100
}
101

102
// 清理旧的响应联系函数
103
function cleanup(effectFn) {
104
  // effectFn.deps 是多个 key和set的map数组
105
  for (let i = 0; i < effectFn.deps.length; i++) {
106
    // 依赖集合Set (每个具体的set，因为Set是target对应map内对应key的Set引用地址)
107
    const deps = effectFn.deps[i];
108
    // 这里其实就是删除对应依赖集合中的当前副作用函数
109
    deps.delete(effectFn);
110
  }
111
  // 重置effectFn.deps数组  没有使用=[]因为原修改减少gc优化性能
112
  effectFn.deps.length = 0;
113
}
114
//主流程第二步：执行副作用
115
let temp1, temp2;
116
effect(() => {
117
  console.log('effect1 执行');
118

119
  // effect2 (模拟子组件)
120
  effect(() => {
121
    console.log('effect2 执行');
122
    temp2 = obj.bar; // 读取 bar，收集了 effect2
123
  }, 'effect2');
124

125
  // 重点：回到 effect1 继续执行
126
  console.log('--- 回到 effect1，接下来读取 obj.foo ---');
127
  temp1 = obj.foo; // 读取 foo，此时 activeEffect 是谁？
128
}, 'effect1');
129

130
setTimeout(() => {
131
  // obj.ok = false;
132
  // obj.text = 'hello reactive'; // 设置虽然设置text的值，但是因为ok为false，不会读取到text的值，text一直都是旧的，只有在读取到text的时候才会更新
133
}, 1000);
134

135
/*
136
  主要流程
137
  1.代理数据
138
  2.执行副作用effect(()=>{xxx})中的()=>{xxx}
139
  3.若副作用中读取响应式数据，触发track 收集依赖（副作用函数也收集到了其关联的Set）
140
  4.若交互修改了响应式数据，触发trigger执行副作用 触发变化
141
  6.清空副作用函数收集到的关联的Set,最后执行fn(因为fn里又有读取响应式数据，所所有先清空依赖再重新收集新的)
142
*/

2.无限递归导致栈溢出#

原因#

如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行

1
const obj = reactive({ foo: 1 });
2
effect(() => {
3
  obj.foo++; // 这一行等于：obj.foo = obj.foo + 1
4
});

**读取 **obj.foo：触发 track，将副作用函数收集。

**设置 **obj.foo：触发 trigger，尝试重新执行该副作用函数。

结果：此时该副作用函数正在执行中，trigger 又立刻叫它再跑一遍。这就导致了无限递归调用，最后报 Maximum call stack size exceeded 错误。

解决思路#

在 trigger 中增加判断

1
function trigger(target, key) {
2
  const depsMap = bucket.get(target);
3
  if (!depsMap) return;
4

5
  const effects = depsMap.get(key);
6
  const effectsToRun = new Set();
7

8
  effects && effects.forEach(effectFn => {
9
    // 核心改进：如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不执行
10
    if (effectFn !== activeEffect) {
11
      effectsToRun.add(effectFn);
12
    }
13
  });
14

15
  effectsToRun.forEach(effectFn => effectFn());
16
}

V3 调度系统#

1
const obj = reactive({ foo: 1 })
2

3
effect(() => {
4
  console.log(obj.foo)
5
})
6

7
obj.foo++
8
console.log('结束')

目前输出的顺序是 1-》2-》结束

如果我希望顺序变成 1-》结束-》2, 或者连续执行 obj.foo++ 100 次，effect 跟着执行 100 次是极大的性能浪费

需要调度机制，让 effect 能够受控的执行

实现思路#

1.像 effect.deps 一样，给 effect 增加第二个参数 options，用来传递调度器 scheduler

1
function effect(fn, options = {}) {
2
  const effectFn = () => {
3
    cleanup(effectFn)
4
    activeEffect = effectFn
5
    effectStack.push(effectFn)
6
    fn()
7
    effectStack.pop()
8
    activeEffect = effectStack[effectStack.length - 1]
9
  }
10
  // 将 options 挂载到 effectFn 上，方便在 trigger 中读取
11
  effectFn.options = options
12
  effectFn.deps = []
13
  effectFn()
14
}

2.在 trigger 中触发调度

在触发更新时，不再直接调用 effectFn()，而是检查它有没有配置 scheduler。

1
function trigger(target, key) {
2
  const depsMap = bucket.get(target)
3
  if (!depsMap) return
4
  const effects = depsMap.get(key)
5

6
  const effectsToRun = new Set()
7
  effects && effects.forEach(effectFn => {
8
    if (effectFn !== activeEffect) {
9
      effectsToRun.add(effectFn)
10
    }
11
  })
12

13
  effectsToRun.forEach(effectFn => {
14
    // 如果存在调度器，则将执行权交给调度器
15
    if (effectFn.options.scheduler) {
16
      effectFn.options.scheduler(effectFn)
17
    } else {
18
      effectFn()
19
    }
20
  })
21
}

3.异步派发（连续修改，只执行一次）

1
// 存储副作用的桶
2
const bucket = new WeakMap(); // {target: map} 原始对象： map
3
// 为什么weakmap是弱引用的
4

5
// 存储被注册的副作用函数
6
let activeEffect;
7
// 副作用函数栈
8
const effectStack = [];
9

10
// 注册副作用函数
11
function effect(fn, options) {
12
  const effectFn = () => {
13
    // 清除旧的响应联系  trigger触发effectFn执行
14
    cleanup(effectFn);
15

16
    // effectFn执行时,设置为当前激活的副作用函数
17
    // 1.将包装好的函数赋值给全局变量
18
    activeEffect = effectFn;
19

20
    // 2.调用之前，将当前副作用函数压入栈中
21
    effectStack.push(effectFn);
22
    // 执行副作用
23
    fn();
24

25
    // 3.执行完毕后，将当前副作用函数从栈中弹出
26
    effectStack.pop();
27
    // 4.将activeEffect 还原为栈顶函数（外层副作用函数）
28
    activeEffect = effectStack[effectStack.length - 1];
29
  };
30
  // 存储所有与该副作用相关的依赖集合(需要副作用函数自己记住被放到了那个依赖集合Set里)
31
  effectFn.deps = [];
32
  // 新增： 挂载options
33
  effectFn.options = options;
34
  // 执行副作用函数
35
  effectFn();
36
  return effectFn;
37
}
38

39
const data = { text: 'hello world', ok: true, foo: 1, bar: 2 };
40

41
// 主流程第一步：代理原始数据
42
const obj = new Proxy(data, {
43
  get(target, key, receiver) {
44
    track(target, key);
45
    return Reflect.get(target, key, receiver);
46
  },
47
  set(target, key, value, receiver) {
48
    // 先set， 下面获取到的才是新的值
49
    const result = Reflect.set(target, key, value, receiver);
50
    trigger(target, key);
51
    return result;
52
  },
53
});
54

55
// 主流程第三步：收集依赖：存储副作用，方便后续追踪
56
function track(target, key) {
57
  // activeEffect 副作用函数没有激活， 直接return
58
  if (!activeEffect) return;
59

60
  // 把target存到桶里去 (先看桶里原来有没有)
61
  let depMap = bucket.get(target);
62
  // 没有，则添加
63
  !depMap && bucket.set(target, (depMap = new Map()));
64
  // 如果有， 则看key
65

66
  // map里存储的 key和 Set
67
  let deps = depMap.get(key);
68
  // 没有， 则添加
69
  !deps && depMap.set(key, (deps = new Set()));
70

71
  // 将当前激活的副作用添加到桶里
72
  deps.add(activeEffect);
73

74
  // 将当前副作用函数的依赖集合deps（引用地址），添加到effectFn.deps中
75
  activeEffect.deps.push(deps);
76
}
77

78
// 主流程第四步：交互修改了数据，执行副作用 触发变化
79
function trigger(target, key) {
80
  // 同理取出 target对应的map(存放诸多key和effect的map)
81
  const depMap = bucket.get(target);
82
  // 没有就返回
83
  if (!depMap) return;
84

85
  // 取出 key 对应的 set(effect)
86
  const effects = depMap.get(key);
87
  // 遍历执行所有副作用
88
  /*
89
    effects.forEach(fn => fn());
90
    执行fn时，先调用cleanup将函数从Set中删除，
91
    然后执行fn()又触发了track，把fn又重新加回了Set里
92
    原因：如果一个值已经被访问过了，但是这个值被删除并重新添加到集合里，
93
      如果此时forEach遍历没有结束，那么这个值会重新被访问
94
    从列表拿出一个任务-》删除任务-》执行任务-》任务又自己塞回列表末尾-》接着拿任务
95
  */
96
  // 构造一个新的set集合并遍历，防止无限循环
97
  const effectsToRun = new Set();
98
  // 如果trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不执
99
  effects &&
100
    effects.forEach(effectFn => {
101
      if (effectFn !== activeEffect) {
102
        effectsToRun.add(effectFn);
103
      }
104
    });
105

106
  effectsToRun.forEach(effectFn => {
107
    // 如果存在调度器，则将执行权交给调度器
108
    if (effectFn.options.scheduler) {
109
      effectFn.options.scheduler(effectFn);
110
    } else {
111
      effectFn();
112
    }
113
  });
114
}
115

116
// 清理旧的响应联系函数
117
function cleanup(effectFn) {
118
  // effectFn.deps 是多个 key和set的map数组
119
  for (let i = 0; i < effectFn.deps.length; i++) {
120
    // 依赖集合Set (每个具体的set，因为Set是target对应map内对应key的Set引用地址)
121
    const deps = effectFn.deps[i];
122
    // 这里其实就是删除对应依赖集合中的当前副作用函数
123
    deps.delete(effectFn);
124
  }
125
  // 重置effectFn.deps数组  没有使用=[]因为原修改减少gc优化性能
126
  effectFn.deps.length = 0;
127
}
128

129
/* 任务队列 start */
130
const jobQueue = new Set(); // 任务队列自动去重
131
const p = Promise.resolve(); // 创建一个微任务
132
let isFlushing = false; // 是否正在刷新队列
133

134
function flushJob() {
135
  if (isFlushing) return;
136
  isFlushing = true;
137

138
  p.then(() => {
139
    // 在一个微任务中一次性执行读完队列里所有的job
140
    jobQueue.forEach(job => job());
141
  }).finally(() => {
142
    isFlushing = false;
143
  });
144
}
145
/* 任务队列 end */
146

147
//主流程第二步：执行副作用
148
effect(
149
  () => {
150
    console.log('obj.foo的值为：', obj.foo);
151
    obj.foo++;
152
    obj.foo++;
153
    obj.foo++;
154
    obj.foo++;
155
    obj.foo++;
156
    // 这里读取并设置了这么多次，
157
    // 在第一次执行jobQueue时，jobQueue就被设置为了true，
158
    // 随后p.then里面的函数被推入微任务队列，
159
    // 任何继续执行同步代码obj.foo++
160
    // fn被继续添加到flushJob中，但是被Set去重了
161
    // 同步任务执行完毕后，推入微任务队列中的函数开始执行，此时obj.foo已经是
162
  },
163
  {
164
    scheduler(fn) {
165
      jobQueue.add(fn);
166
      flushJob();
167
    },
168
  }
169
);
170

171
/*
172
  主要流程
173
  1.代理数据
174
  2.执行副作用effect(()=>{xxx})中的()=>{xxx}
175
  3.若副作用中读取响应式数据，触发track 收集依赖（副作用函数也收集到了其关联的Set）
176
  4.若交互修改了响应式数据，触发trigger执行副作用 触发变化
177
  6.清空副作用函数收集到的关联的Set,最后执行fn(因为fn里又有读取响应式数据，所所有先清空依赖再重新收集新的)
178
*/

v4 computed 计算属性#

基础：Lazy 延迟执行#

之前的 effect 是立即执行的。但对于计算属性，我们希望只有在读取它的值时，才去计算。

修改 `effect` 函数#

我们需要让 effect 返回包装后的 effectFn，这样我们就能手动执行它并拿到返回值。

1
function effect(fn, options = {}) {
2
  const effectFn = () => {
3
    cleanup(effectFn)
4
    activeEffect = effectFn
5
    effectStack.push(effectFn)
6
    const res = fn() // 拿到用户函数的返回值
7
    effectStack.pop()
8
    activeEffect = effectStack[effectStack.length - 1]
9
    return res // 返回结果
10
  }
11
  effectFn.options = options
12
  effectFn.deps = []
13

14
  // 如果不是 lazy，才立即执行
15
  if (!options.lazy) {
16
    effectFn()
17
  }
18
  return effectFn // 返回副作用函数
19
}

核心：实现缓存机制#

计算属性最大的特点是：如果依赖没变，多次访问应该直接返回缓存。

两个关键变量：

value：用来缓存上一次计算的结果。
dirty：一个标志位，true 表示“脏了”（依赖变了，需要重新计算），false 表示“干净”（直接拿缓存）。

1
function computed(getter) {
2
  let value
3
  let dirty = true // 默认是脏的，第一次读取需要计算
4

5
  // 把 getter 作为副作用函数
6
  const effectFn = effect(getter, {
7
    lazy: true,
8
    // 当依赖的数据发生变化时，不执行副作用，而是把 dirty 设为 true
9
    scheduler() {
10
      dirty = true
11
    }
12
  })
13

14
  const obj = {
15
    get value() {
16
      if (dirty) {
17
        value = effectFn() // 重新计算
18
        dirty = false     // 计算完就不脏了
19
      }
20
      return value
21
    }
22
  }
23

24
  return obj
25
}

解决嵌套失效问题#

问题#

计算属性没有因为内部值的变化而更新

1
const sum = computed(() => obj.foo + obj.bar)
2

3
effect(() => {
4
  console.log(sum.value) // 在另一个 effect 中使用计算属性
5
})
6

7
obj.foo++ // 修改依赖，会导致 effect 重新执行吗？

答案是：不会。 因为 sum.value 只是一个普通对象的 getter，它并没有把外层的 effect 收集到自己的依赖里。当 obj.foo 变化时，只会触发 computed 内部的 scheduler（把 dirty 设为 true），但没人告诉外层 effect 该刷新了。

解决方案#

手动 track 和 trigger:当读取 computed 时，我们手动调用 track；当 computed 依赖变化时，在 scheduler 里手动调用 trigger。

1
function computed(getter) {
2
  let value
3
  let dirty = true
4

5
  const effectFn = effect(getter, {
6
    lazy: true,
7
    scheduler() {
8
      dirty = true
9
      // 当依赖变化时，手动触发指向 computed 对象本身的更新
10
      trigger(obj, 'value')
11
    }
12
  })
13

14
  const obj = {
15
    get value() {
16
      if (dirty) {
17
        value = effectFn()
18
        dirty = false
19
      }
20
      // 当读取 value 时，手动追踪
21
      track(obj, 'value')
22
      return value
23
    }
24
  }
25

26
  return obj
27
}

4.总结 `computed` 的运行逻辑#

初始化：创建一个 lazy 的 effect。
首次读取：触发 getter，dirty 变 false，缓存结果。同时，如果是在另一个 effect 里读取的，会把那个 effect 收集到 computed 的依赖桶里。
依赖变更：底层数据（如 obj.foo）变了，触发 computed 的 scheduler。此时 dirty 变回 true，并通知外层 effect 更新。
再次读取：外层 effect 重新执行，读取 sum.value，因为此时 dirty 是 true，重新计算，拿到最新值。

5.为什么 `computed` 不直接用 `reactive` 包裹？#

其实 Vue 内部确实可以这样做，但 computed 有它特殊的内部逻辑（比如 dirty 标志位的判断、延迟计算等）。为了精准控制什么时候该重新计算、什么时候该通知外部更新，手动编写 track 和 trigger 是最清晰、性能最高的方式。

reactive 像是一条声控灯走廊：只要你走过去（读取），灯就自动感应并记住你（track）。

computed 像是一个带开关的密室：你进去后，必须手动按一下墙上的登记表（显式调用 track），外面的管理员（effect）才知道你在里面。如果你不按，外面的人就永远不知道里面发生了什么。

1
// 存储副作用的桶
2
const bucket = new WeakMap(); // {target: map} 原始对象： map
3
// 为什么weakmap是弱引用的
4

5
// 存储被注册的副作用函数
6
let activeEffect;
7
// 副作用函数栈
8
const effectStack = [];
9

10
// 注册副作用函数
11
function effect(fn, options = {}) {
12
  const effectFn = () => {
13
    // 清除旧的响应联系  trigger触发effectFn执行
14
    cleanup(effectFn);
15

16
    // effectFn执行时,设置为当前激活的副作用函数
17
    // 1.将包装好的函数赋值给全局变量
18
    activeEffect = effectFn;
19

20
    // 2.调用之前，将当前副作用函数压入栈中
21
    effectStack.push(effectFn);
22
    // 执行副作用 难道用户函数的返回值
23
    const res = fn();
24

25
    // 3.执行完毕后，将当前副作用函数从栈中弹出
26
    effectStack.pop();
27
    // 4.将activeEffect 还原为栈顶函数（外层副作用函数）
28
    activeEffect = effectStack[effectStack.length - 1];
29
    // 返回结果
30
    return res;
31
  };
32
  // 存储所有与该副作用相关的依赖集合(需要副作用函数自己记住被放到了那个依赖集合Set里)
33
  effectFn.deps = [];
34
  // 新增： 挂载options
35
  effectFn.options = options;
36
  // 不是 lazy, 才立即执行副作用函数
37
  if (!options.lazy) {
38
    effectFn();
39
  }
40
  // 返回副作用函数
41
  return effectFn;
42
}
43

44
const data = { text: 'hello world', ok: true, foo: 1, bar: 2 };
45

46
// 主流程第一步：代理原始数据
47
const obj = new Proxy(data, {
48
  get(target, key, receiver) {
49
    track(target, key);
50
    return Reflect.get(target, key, receiver);
51
  },
52
  set(target, key, value, receiver) {
53
    // 先set， 下面获取到的才是新的值
54
    const result = Reflect.set(target, key, value, receiver);
55
    trigger(target, key);
56
    return result;
57
  },
58
});
59

60
// 主流程第三步：收集依赖：存储副作用，方便后续追踪
61
function track(target, key) {
62
  // activeEffect 副作用函数没有激活， 直接return
63
  if (!activeEffect) return;
64

65
  // 把target存到桶里去 (先看桶里原来有没有)
66
  let depMap = bucket.get(target);
67
  // 没有，则添加
68
  !depMap && bucket.set(target, (depMap = new Map()));
69
  // 如果有， 则看key
70

71
  // map里存储的 key和 Set
72
  let deps = depMap.get(key);
73
  // 没有， 则添加
74
  !deps && depMap.set(key, (deps = new Set()));
75

76
  // 将当前激活的副作用添加到桶里
77
  deps.add(activeEffect);
78

79
  // 将当前副作用函数的依赖集合deps（引用地址），添加到effectFn.deps中
80
  activeEffect.deps.push(deps);
81
}
82

83
// 主流程第四步：交互修改了数据，执行副作用 触发变化
84
function trigger(target, key) {
85
  // 同理取出 target对应的map(存放诸多key和effect的map)
86
  const depMap = bucket.get(target);
87
  // 没有就返回
88
  if (!depMap) return;
89

90
  // 取出 key 对应的 set(effect)
91
  const effects = depMap.get(key);
92
  // 遍历执行所有副作用
93
  /*
94
    effects.forEach(fn => fn());
95
    执行fn时，先调用cleanup将函数从Set中删除，
96
    然后执行fn()又触发了track，把fn又重新加回了Set里
97
    原因：如果一个值已经被访问过了，但是这个值被删除并重新添加到集合里，
98
      如果此时forEach遍历没有结束，那么这个值会重新被访问
99
    从列表拿出一个任务-》删除任务-》执行任务-》任务又自己塞回列表末尾-》接着拿任务
100
  */
101
  // 构造一个新的set集合并遍历，防止无限循环
102
  const effectsToRun = new Set();
103
  // 如果trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不执
104
  effects &&
105
    effects.forEach(effectFn => {
106
      if (effectFn !== activeEffect) {
107
        effectsToRun.add(effectFn);
108
      }
109
    });
110

111
  effectsToRun.forEach(effectFn => {
112
    // 如果存在调度器，则将执行权交给调度器
113
    if (effectFn.options.scheduler) {
114
      effectFn.options.scheduler(effectFn);
115
    } else {
116
      effectFn();
117
    }
118
  });
119
}
120

121
// 清理旧的响应联系函数
122
function cleanup(effectFn) {
123
  // effectFn.deps 是多个 key和set的map数组
124
  for (let i = 0; i < effectFn.deps.length; i++) {
125
    // 依赖集合Set (每个具体的set，因为Set是target对应map内对应key的Set引用地址)
126
    const deps = effectFn.deps[i];
127
    // 这里其实就是删除对应依赖集合中的当前副作用函数
128
    deps.delete(effectFn);
129
  }
130
  // 重置effectFn.deps数组  没有使用=[]因为原修改减少gc优化性能
131
  effectFn.deps.length = 0;
132
}
133

134
/* 任务队列 start */
135
const jobQueue = new Set(); // 任务队列自动去重
136
const p = Promise.resolve(); // 创建一个微任务
137
let isFlushing = false; // 是否正在刷新队列
138

139
function flushJob() {
140
  if (isFlushing) return;
141
  isFlushing = true;
142

143
  p.then(() => {
144
    // 在一个微任务中一次性执行读完队列里所有的job
145
    jobQueue.forEach(job => job());
146
  }).finally(() => {
147
    isFlushing = false;
148
  });
149
}
150
/* 任务队列 end */
151

152
/* computed start */
153
function computed(getter) {
154
  // getter为调用computed传入的副作用函数
155
  let value;
156
  let dirty = true; // 第一次需要读取计算，默认为true
157

158
  // effectFn = xxx， 也就是将effect声明中return effectFn的目的
159
  const effectFn = effect(getter, {
160
    lazy: true,
161
    scheduler() {
162
      dirty = true;
163
      // 当依赖变化时，手动触发指向 computed 对象本身的更新
164
      trigger(obj, 'value');
165
    },
166
  });
167
  const obj = {
168
    get value() {
169
      if (dirty) {
170
        //只有执行了这里  执行obj.xx， 触发track，将getter收集到依赖中
171
        value = effectFn(); // 副作用函数在dirty为true才会执行，
172
        dirty = false;
173
      }
174
      // 这里返回的value是一个普通对象的getter
175
      /*
176
        effect(() => {
177
          console.log(sum.value);
178
        });
179

180
        没有把这个effect添加到依赖中，obj.foo变了，dirty设置为了true，但是没有依赖可以触发
181

182
        原因： obj是一个普通的带有get value()的对象，没有通过new Proxy代理， 没有track可以执行，也就没法收集sum的依赖
183
      */
184
      // 读取value时，手动追踪
185
      track(obj, 'value');
186
      return value;
187
    },
188
  };
189
  return obj;
190
}
191
/* computed end */
192

193
const sum = computed(() => obj.foo + obj.bar);
194
//主流程第二步：执行副作用
195
effect(() => {
196
  console.log('sum.value：', sum.value);
197
});
198

199
obj.foo++;
200
/*
201
  主要流程
202
  1.代理数据
203
  2.执行副作用effect(()=>{xxx})中的()=>{xxx}
204
  3.若副作用中读取响应式数据，触发track 收集依赖（副作用函数也收集到了其关联的Set）
205
  4.若交互修改了响应式数据，触发trigger执行副作用 触发变化
206
  6.清空副作用函数收集到的关联的Set,最后执行fn(因为fn里又有读取响应式数据，所所有先清空依赖再重新收集新的)
207
*/

V5 watch 侦听器及清理机制#

阶段一：基础侦听#

最简单的 watch 只需要以下两步：

触发追踪：读取响应式数据，让 effect 收集依赖。
触发回调：在数据变化时，通过 scheduler 执行用户传入的 cb。

1
function watch(source, cb) {
2
  effect(
3
    // 1. 这里的执行会触发读取，从而进行 track() => source.foo,
4
    {
5
      scheduler() {
6
        // 2. 当 source.foo 变化时，执行回调
7
        cb()
8
      }
9
    }
10
  )
11
}
12

13
// 使用：
14
watch(obj, () => { console.log('数据变了') })
15
obj.foo++

阶段二：递归观测（Traverse）#

上面的实现有个硬伤：如果 source 是一个对象，你只写 () => source 是没用的。因为响应式系统只会在你读取具体某个属性（如 source.foo）时才进行 track。

我们需要一个通用的 traverse**（递归遍历）** 函数，把对象里的每一个属性都“摸一遍”。

1
function traverse(value, seen = new Set()) {
2
  // 如果是原始值或者已经读取过了，就跳过
3
  if (typeof value !== 'object' || value === null || seen.has(value)) return
4

5
  seen.add(value)
6
  // 递归读取对象里的每一个属性
7
  for (const k in value) {
8
    traverse(value[k], seen)
9
  }
10

11
  return value
12
}
13

14
function watch(source, cb) {
15
  effect(
16
    // 调用 traverse 递归读取，完成全量依赖收集
17
    () => traverse(source),
18
    {
19
      scheduler() {
20
        cb()
21
      }
22
    }
23
  )
24
}

阶段三：获取新值与旧值（New/Old Value）#

这是 watch 最常用的功能：cb(newValue, oldValue)。

要实现它，我们需要利用 effect 的 lazy 选项。手动控制 effect 的执行，从而在变化发生前拿到旧值，变化发生后拿到新值。

1
function watch(source, cb) {
2
  let getter
3
  // 如果 source 是函数，说明是 getter（如 () => obj.foo）// 如果 source 是对象，则递归遍历if (typeof source === 'function') {
4
    getter = source
5
  } else {
6
    getter = () => traverse(source)
7
  }
8

9
  let oldVal, newVal
10

11
  // 使用 effect 的 lazy 选项
12
  const effectFn = effect(getter, {
13
    lazy: true,
14
    scheduler() {
15
      // 在 scheduler 中重新执行，获取新值
16
      newVal = effectFn()
17
      cb(newVal, oldVal)
18
      // 执行完后，更新旧值，为下一次做准备
19
      oldVal = newVal
20
    }
21
  })
22

23
  // 第一次手动执行，拿到初始值作为“旧值”
24
  oldVal = effectFn()
25
}

阶段四：立即执行（immediate）#

有时候我们希望 watch 创建时就立刻跑一遍回调（就像 Vue 里的 immediate: true）。

1
function watch(source, cb, options = {}) {
2
  let getter
3
  if (typeof source === 'function') {
4
    getter = source
5
  } else {
6
    getter = () => traverse(source)
7
  }
8

9
  let oldVal, newVal
10

11
  // 提取 job 逻辑const job = () => {
12
    newVal = effectFn()
13
    cb(newVal, oldVal)
14
    oldVal = newVal
15
  }
16

17
  const effectFn = effect(getter, {
18
    lazy: true,
19
    scheduler: job // 变化时跑 job
20
  })
21

22
  if (options.immediate) {
23
    // 立即跑一次 job
24
    job()
25
  } else {
26
    // 否则只是获取初始的 oldVal
27
    oldVal = effectFn()
28
  }
29
}

进阶：如何处理“竞态问题”与清理？#

想象一下这个场景：

watch 观测到了 obj.foo 的变化，发起了一个网络请求 A。
请求 A 还没回来，obj.foo 又变了，触发了请求 B。
结果： 请求 B 先回来了，页面渲染了新数据；过了一会儿，请求 A 才回来，旧数据把新数据覆盖了。

Vue 提供了一个 onCleanup 机制来解决它。

实现 `onCleanup`#

我们需要在调用 cb 时，传入一个函数让用户注册“清理动作”。

1
function watch(source, cb, options = {}) {
2
  let getter
3
  if (typeof source === 'function') {
4
    getter = source
5
  } else {
6
    getter = () => traverse(source)
7
  }
8

9
  let oldVal, newVal
10

11
  // 1. 定义 cleanup 变量
12
  let cleanup
13
  function onCleanup(fn) {
14
    cleanup = fn
15
  }
16

17
  const job = () => {
18
    newVal = effectFn()
19
    // 2. 在执行回调前，先执行上一次注册的清理函数
20
    if (cleanup) {
21
      cleanup()
22
    }
23
    // 3. 将 onCleanup 作为第三个参数传给用户
24
    cb(newVal, oldVal, onCleanup)
25
    oldVal = newVal
26
  }
27

28
  const effectFn = effect(getter, {
29
    lazy: true,
30
    scheduler: job
31
  })
32

33
  if (options.immediate) {
34
    job()
35
  } else {
36
    oldVal = effectFn()
37
  }
38
}

使用#

1
watch(obj, async (newVal, oldVal, onCleanup) => {
2
  let expired = false// 注册清理函数：当 watch 即将再次触发时，这个函数会先运行
3
  onCleanup(() => {
4
    expired = true
5
  })
6

7
  const res = await fetch('/api/data')
8

9
  // 如果已经“过期”了，说明后面又有新的请求了，就不要更新视图了if (!expired) {
10
    data.value = res
11
  }
12
})

watch 第一个入参的对比#

第一个参数	getter 实际是什么	依赖收集范围	何时触发	newVal / oldVal 含义
对象 `obj`	`() => traverse(obj)`	整个对象所有属性（含嵌套）	任意被遍历到的属性变化	当前/上一次的整个对象（同引用，需深拷贝才有真正旧值）
`() => obj`	`() => obj`	无（未访问任何属性）	不会再次触发	仅首次执行时有值，后续 obj 变化不触发
`() => obj.foo`	该函数本身	仅 `obj.foo`	`obj.foo` 变化	当前/上一次 getter 的返回值
`() => obj.foo + obj.bar`	该函数本身	`obj.foo`、`obj.bar`	二者之一变化	当前/上一次的计算结果

1
// 存储副作用的桶
2
const bucket = new WeakMap(); // {target: map} 原始对象： map
3
// 为什么weakmap是弱引用的
4

5
// 存储被注册的副作用函数
6
let activeEffect;
7
// 副作用函数栈
8
const effectStack = [];
9

10
// 注册副作用函数
11
function effect(fn, options = {}) {
12
  const effectFn = () => {
13
    // 清除旧的响应联系  trigger触发effectFn执行
14
    cleanup(effectFn);
15

16
    // effectFn执行时,设置为当前激活的副作用函数
17
    // 1.将包装好的函数赋值给全局变量
18
    activeEffect = effectFn;
19

20
    // 2.调用之前，将当前副作用函数压入栈中
21
    effectStack.push(effectFn);
22
    // 执行副作用 难道用户函数的返回值
23
    const res = fn();
24

25
    // 3.执行完毕后，将当前副作用函数从栈中弹出
26
    effectStack.pop();
27
    // 4.将activeEffect 还原为栈顶函数（外层副作用函数）
28
    activeEffect = effectStack[effectStack.length - 1];
29
    // 返回结果
30
    return res;
31
  };
32
  // 存储所有与该副作用相关的依赖集合(需要副作用函数自己记住被放到了那个依赖集合Set里)
33
  effectFn.deps = [];
34
  // 新增： 挂载options
35
  effectFn.options = options;
36
  // 不是 lazy, 才立即执行副作用函数
37
  if (!options.lazy) {
38
    effectFn();
39
  }
40
  // 返回副作用函数
41
  return effectFn;
42
}
43

44
const data = { text: 'hello world', ok: true, foo: 1, bar: 2 };
45

46
// 主流程第一步：代理原始数据
47
const obj = new Proxy(data, {
48
  get(target, key, receiver) {
49
    track(target, key);
50
    return Reflect.get(target, key, receiver);
51
  },
52
  set(target, key, value, receiver) {
53
    // 先set， 下面获取到的才是新的值
54
    const result = Reflect.set(target, key, value, receiver);
55
    trigger(target, key);
56
    return result;
57
  },
58
});
59

60
// 主流程第三步：收集依赖：存储副作用，方便后续追踪
61
function track(target, key) {
62
  // activeEffect 副作用函数没有激活， 直接return
63
  if (!activeEffect) return;
64

65
  // 把target存到桶里去 (先看桶里原来有没有)
66
  let depMap = bucket.get(target);
67
  // 没有，则添加
68
  !depMap && bucket.set(target, (depMap = new Map()));
69
  // 如果有， 则看key
70

71
  // map里存储的 key和 Set
72
  let deps = depMap.get(key);
73
  // 没有， 则添加
74
  !deps && depMap.set(key, (deps = new Set()));
75

76
  // 将当前激活的副作用添加到桶里
77
  deps.add(activeEffect);
78

79
  // 将当前副作用函数的依赖集合deps（引用地址），添加到effectFn.deps中
80
  activeEffect.deps.push(deps);
81
}
82

83
// 主流程第四步：交互修改了数据，执行副作用 触发变化
84
function trigger(target, key) {
85
  // 同理取出 target对应的map(存放诸多key和effect的map)
86
  const depMap = bucket.get(target);
87
  // 没有就返回
88
  if (!depMap) return;
89

90
  // 取出 key 对应的 set(effect)
91
  const effects = depMap.get(key);
92
  // 遍历执行所有副作用
93
  /*
94
    effects.forEach(fn => fn());
95
    执行fn时，先调用cleanup将函数从Set中删除，
96
    然后执行fn()又触发了track，把fn又重新加回了Set里
97
    原因：如果一个值已经被访问过了，但是这个值被删除并重新添加到集合里，
98
      如果此时forEach遍历没有结束，那么这个值会重新被访问
99
    从列表拿出一个任务-》删除任务-》执行任务-》任务又自己塞回列表末尾-》接着拿任务
100
  */
101
  // 构造一个新的set集合并遍历，防止无限循环
102
  const effectsToRun = new Set();
103
  // 如果trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不执
104
  effects &&
105
    effects.forEach(effectFn => {
106
      if (effectFn !== activeEffect) {
107
        effectsToRun.add(effectFn);
108
      }
109
    });
110

111
  effectsToRun.forEach(effectFn => {
112
    // 如果存在调度器，则将执行权交给调度器
113
    if (effectFn.options.scheduler) {
114
      effectFn.options.scheduler(effectFn);
115
    } else {
116
      effectFn();
117
    }
118
  });
119
}
120

121
// 清理旧的响应联系函数
122
function cleanup(effectFn) {
123
  // effectFn.deps 是多个 key和set的map数组
124
  for (let i = 0; i < effectFn.deps.length; i++) {
125
    // 依赖集合Set (每个具体的set，因为Set是target对应map内对应key的Set引用地址)
126
    const deps = effectFn.deps[i];
127
    // 这里其实就是删除对应依赖集合中的当前副作用函数
128
    deps.delete(effectFn);
129
  }
130
  // 重置effectFn.deps数组  没有使用=[]因为原修改减少gc优化性能
131
  effectFn.deps.length = 0;
132
}
133

134
/* 任务队列 start */
135
const jobQueue = new Set(); // 任务队列自动去重
136
const p = Promise.resolve(); // 创建一个微任务
137
let isFlushing = false; // 是否正在刷新队列
138

139
function flushJob() {
140
  if (isFlushing) return;
141
  isFlushing = true;
142

143
  p.then(() => {
144
    // 在一个微任务中一次性执行读完队列里所有的job
145
    jobQueue.forEach(job => job());
146
  }).finally(() => {
147
    isFlushing = false;
148
  });
149
}
150
/* 任务队列 end */
151

152
/* traverse 递归函数 访问所有属性 start */
153
function traverse(value, seen = new Set()) {
154
  // 原始数据或已经读取过了，就跳过
155
  if (typeof value !== 'object' || value === null || seen.has(value)) return;
156

157
  seen.add(value);
158
  for (const k in value) {
159
    traverse(value[k], seen);
160
  }
161
  return value;
162
}
163
/* traverse 递归函数 end */
164

165
/* computed start */
166
function computed(getter) {
167
  // getter为调用computed传入的副作用函数
168
  let value;
169
  let dirty = true; // 第一次需要读取计算，默认为true
170

171
  // effectFn = xxx， 也就是将effect声明中return effectFn的目的
172
  const effectFn = effect(getter, {
173
    lazy: true,
174
    scheduler() {
175
      dirty = true;
176
      // 当依赖变化时，手动触发指向 computed 对象本身的更新
177
      trigger(obj, 'value');
178
    },
179
  });
180
  const obj = {
181
    get value() {
182
      if (dirty) {
183
        //只有执行了这里  执行obj.xx， 触发track，将getter收集到依赖中
184
        value = effectFn(); // 副作用函数在dirty为true才会执行，
185
        dirty = false;
186
      }
187
      // 这里返回的value是一个普通对象的getter
188
      /*
189
        effect(() => {
190
          console.log(sum.value);
191
        });
192

193
        没有把这个effect添加到依赖中，obj.foo变了，dirty设置为了true，但是没有依赖可以触发
194

195
        原因： obj是一个普通的带有get value()的对象，没有通过new Proxy代理， 没有track可以执行，也就没法收集sum的依赖
196
      */
197
      // 读取value时，手动追踪
198
      track(obj, 'value');
199
      return value;
200
    },
201
  };
202
  return obj;
203
}
204
/* computed end */
205

206
/* watch start */
207
function watch(source, cb, options = {}) {
208
  let getter;
209
  // 如果 source 是函数，说明是 getter（如 () => obj.foo）
210
  if (typeof source === 'function') getter = source;
211
  // 如果 source 是对象，则递归遍历
212
  else getter = () => traverse(source);
213

214
  let oldVal, newVal;
215

216
  // 处理watch的异步静态问题
217
  /*
218
    1.watch 观测到了 obj.foo 的变化，发起了一个网络请求 A。
219

220
    2.请求 A 还没回来，obj.foo 又变了，触发了请求 B。
221

222
    3.结果： 请求 B 先回来了，页面渲染了新数据；过了一会儿，请求 A 才回来，旧数据把新数据覆盖了。
223
  */
224
  let cleanup;
225
  function onCleanup(fn) {
226
    cleanup = fn;
227
  }
228

229
  const job = () => {
230
    // 重新执行获取新值
231
    newVal = effectFn();
232
    // 执行回调前，先执行上一次注册的清理函数
233
    cleanup?.();
234
    // 将 onCleanup 作为第三个参数传给用户
235
    cb(newVal, oldVal, onCleanup);
236
    // 执行完之后，新的就变成老的了
237
    oldVal = newVal;
238
  };
239

240
  const effectFn = effect(
241
    // 1. 这里的副作用，在执行时触发读取，从而进行 track
242
    // () => source.foo, //  这里只能写具体的key很不方便
243
    // () => traverse(source), // 进行全量的依赖收集
244
    getter,
245
    {
246
      lazy: true,
247
      scheduler: job,
248
      /* 提取到job中
249
        scheduler() {
250
          // 2. 当source.foo 变化时， 执行回调
251
          // cb();
252
            // 重新执行获取新值
253
            newVal = effectFn();
254
            cb(oldVal, newVal);
255
            // 执行完之后，新的就变成老的了
256
            oldVal = newVal;
257
        },
258
      */
259
    }
260
  );
261

262
  // 初始执行，初始值就是旧值
263
  // oldVal = effectFn();
264
  if (options.immediate) {
265
    // 立即跑一次 job
266
    job();
267
  } else {
268
    oldVal = effectFn();
269
  }
270
}
271
/* watch end */
272

273
watch(
274
  () => obj,
275
  async (newVal, oldVal, onCleanup) => {
276
    let expired = false;
277
    console.log('数据变了', newVal, oldVal);
278
    // 注册清理函数：当 watch 即将再次触发时，这个函数会先运行
279
    onCleanup(() => {
280
      expired = true;
281
    });
282
    // 发送请求...
283
    // const res = await fetch('/api/data');
284
    // 如果已经“过期”了，说明后面又有新的请求了，就不要更新视图了
285
    if (!expired) {
286
      // data.value = res;
287
    }
288
  },
289
  { immediate: true, deep: true }
290
);
291
obj.foo = 2;
292
/*
293
  主要流程
294
  1.代理数据
295
  2.执行副作用effect(()=>{xxx})中的()=>{xxx}
296
  3.若副作用中读取响应式数据，触发track 收集依赖（副作用函数也收集到了其关联的Set）
297
  4.若交互修改了响应式数据，触发trigger执行副作用 触发变化
298
  6.清空副作用函数收集到的关联的Set,最后执行fn(因为fn里又有读取响应式数据，所所有先清空依赖再重新收集新的)
299
*/

v6 数组的响应式#

数组它虽然本质上是对象，但它的语义和普通对象大不相同：

索引与长度的纠缠：设置 arr[100] = 1 会隐含地改变 length。
长度反向影响索引：设置 arr.length = 0 会隐含地删除所有索引。
栈溢出陷阱：push 等方法既读取 length 又修改 length，极易导致死循环。
对象身份错乱：includes 查不到原生对象的问题。

索引与 `length` 的联动#

设置索引引发 `length` 变化#

普通对象 obj.foo = 1 只是 SET。但数组 arr[0] = 1 可能是 SET（修改），也可能是 ADD（新增，如果索引大于当前长度）。需要在 set 拦截器中区分操作类型。

1
function createReactive(obj) {
2
  return new Proxy(obj, {
3
    set(target, key, newVal, receiver) {
4
      const oldVal = target[key]
5

6
      // 判断操作类型：// 如果是数组，且 key 是索引，看它是否小于 length// 如果小于，说明是 SET（修改）；如果大于等于，说明是 ADD（新增）const type = Array.isArray(target)
7
        ? (Number(key) < target.length ? 'SET' : 'ADD')
8
        : Object.prototype.hasOwnProperty.call(target, key) ? 'SET' : 'ADD'const res = Reflect.set(target, key, newVal, receiver)
9

10
      // 只有当值真的变了，才触发 triggerif (oldVal !== newVal && (oldVal === oldVal || newVal === newVal)) {
11
        // 关键：把 type 和 newVal 传给 trigger
12
        trigger(target, key, type, newVal)
13
      }
14
      return res
15
    }
16
    // ... 其他拦截器 get, has, ownKeys 等
17
  })
18
}

`trigger` 的响应（反向联动）#

现在需要升级 trigger。

如果触发的是 ADD 操作（比如 arr[10] = 1），那么依赖 length 的副作用也应该被触发。
如果直接修改了 length（比如 arr.length = 0），那么所有索引 >= newLength 的副作用都应该被触发（因为它们被删了）。

1
function trigger(target, key, type, newVal) {
2
  const depsMap = bucket.get(target)
3
  if (!depsMap) returnconst effectsToRun = new Set()
4

5
  // 1. 常规逻辑：把 key 对应的副作用加进去// ... (省略常规 add 逻辑)// 2.【数组新增特性】如果是数组，且操作是 ADD，说明 length 变了// 需要触发那些依赖 "length" 属性的副作用if (type === 'ADD' && Array.isArray(target)) {
6
    const lengthEffects = depsMap.get('length')
7
    lengthEffects && lengthEffects.forEach(effectFn => {
8
      if (effectFn !== activeEffect) effectsToRun.add(effectFn)
9
    })
10
  }
11

12
  // 3.【数组长度修改】如果直接修改的是 length 属性if (Array.isArray(target) && key === 'length') {
13
    // 找出所有索引 >= 新 length 的副作用，把它们触发掉（因为这些元素被删了）
14
    depsMap.forEach((effects, key) => {
15
      if (key >= newVal) {
16
        effects.forEach(effectFn => {
17
          if (effectFn !== activeEffect) effectsToRun.add(effectFn)
18
        })
19
      }
20
    })
21
  }
22

23
  // ... 执行 effectsToRun
24
}

遍历数组 (for…in)#

对数组进行 for...in 循环时，会触发 ownKeys 拦截。对于普通对象，我们用 ITERATE_KEY 追踪。但对于数组，决定循环次数的是 length。

1
ownKeys(target) {
2
  // 如果是数组，用 'length' 作为 key 去建立联系// 这样当 length 变化（比如 push），for...in 循环就会重新执行
3
  track(target, Array.isArray(target) ? 'length' : ITERATE_KEY)
4
  return Reflect.ownKeys(target)
5
}

查找方法 (`includes`, `indexOf`)#

1
const obj = {}
2
const arr = reactive([obj])
3

4
console.log(arr.includes(arr[0])) // true
5
console.log(arr.includes(obj))    // false (居然是 false？)

为什么？arr.includes 内部会通过 this（也就是 proxy）去访问索引。arr[0] 得到的是 obj 的代理对象。

arr.includes(arr[0]) -> 代理对象 vs 代理对象 -> 匹配成功。
arr.includes(obj) -> 代理对象 vs 原始对象 -> 匹配失败。

解决方案：重写数组方法 我们需要拦截这些方法，先试着在代理对象里找，找不到再去原始对象里找。

1
const arrayInstrumentations = {}
2

3
;['includes', 'indexOf', 'lastIndexOf'].forEach(method => {
4
  const originMethod = Array.prototype[method]
5
  arrayInstrumentations[method] = function(...args) {
6
    // 1. 在代理对象中查找let res = originMethod.apply(this, args)
7

8
    if (res === false || res === -1) {
9
      // 2. 找不到？通过 this.raw 拿到原始数组，再去查找
10
      res = originMethod.apply(this.raw, args)
11
    }
12
    return res
13
  }
14
})
15

16
// 在 get 拦截器中使用function createReactive(obj) {
17
  return new Proxy(obj, {
18
    get(target, key, receiver) {
19
      // 支持通过 raw 访问原始对象if (key === 'raw') return target
20

21
      // 如果是数组，且访问的是 instrumentations 里的方法，返回重写后的方法if (Array.isArray(target) && arrayInstrumentations.hasOwnProperty(key)) {
22
        return arrayInstrumentations[key]
23
      }
24

25
      // ... 常规 track 逻辑
26
    }
27
  })
28
}

修改器方法的栈溢出 (push)#

1
effect(() => {
2
  arr.push(1)
3
})

发生了什么？

push 会读取 length 属性 -> Track length。
push 会设置 length 属性 -> Trigger length。
trigger 发现 length 变了，重新执行 effect。
effect 再次执行 push -> 读取 length -> 设置 length…
死循环。 解决方案：暂停追踪 在调用 push 等方法期间，我们要人为屏蔽依赖收集。

1
let shouldTrack = true // 全局标记// 重写 push, pop, shift, unshift, splice
2
;['push', 'pop', 'shift', 'unshift', 'splice'].forEach(method => {
3
  const originMethod = Array.prototype[method]
4
  arrayInstrumentations[method] = function(...args) {
5
    // 1. 暂停追踪
6
    shouldTrack = false// 2. 执行原始方法const res = originMethod.apply(this, args)
7
    // 3. 恢复追踪
8
    shouldTrack = truereturn res
9
  }
10
})
11

12
// 修改 track 函数，配合 shouldTrackfunction track(target, key) {
13
  if (!activeEffect || !shouldTrack) return // 如果暂停了，直接返回// ...
14
}

总结#

数组的响应式实现，本质上是对 Proxy 行为的“补丁”。因为 JS 引擎内部实现的数组逻辑（Length 自动更新等）对于 Proxy 来说是黑盒，需要手动去模拟和纠正这些行为：

Trigger 补丁：手动处理 index 和 length 的互相影响。
Lookup 补丁：includes 要同时查代理和原值。
Mutator 补丁：push 必须暂停依赖收集以防死循环。

1
// 存储副作用的桶
2
const bucket = new WeakMap(); // {target: map} 原始对象： map
3
// 为什么weakmap是弱引用的
4

5
// 存储被注册的副作用函数
6
let activeEffect;
7
// 副作用函数栈
8
const effectStack = [];
9

10
// 注册副作用函数
11
function effect(fn, options = {}) {
12
  const effectFn = () => {
13
    // 清除旧的响应联系  trigger触发effectFn执行
14
    cleanup(effectFn);
15

16
    // effectFn执行时,设置为当前激活的副作用函数
17
    // 1.将包装好的函数赋值给全局变量
18
    activeEffect = effectFn;
19

20
    // 2.调用之前，将当前副作用函数压入栈中
21
    effectStack.push(effectFn);
22
    // 执行副作用 难道用户函数的返回值
23
    const res = fn();
24

25
    // 3.执行完毕后，将当前副作用函数从栈中弹出
26
    effectStack.pop();
27
    // 4.将activeEffect 还原为栈顶函数（外层副作用函数）
28
    activeEffect = effectStack[effectStack.length - 1];
29
    // 返回结果
30
    return res;
31
  };
32
  // 存储所有与该副作用相关的依赖集合(需要副作用函数自己记住被放到了那个依赖集合Set里)
33
  effectFn.deps = [];
34
  // 新增： 挂载options
35
  effectFn.options = options;
36
  // 不是 lazy, 才立即执行副作用函数
37
  if (!options.lazy) {
38
    effectFn();
39
  }
40
  // 返回副作用函数
41
  return effectFn;
42
}
43

44
const data = { text: 'hello world', ok: true, foo: 1, bar: 2 };
45

46
// 主流程第一步：代理原始数据
47
const obj = new Proxy(data, {
48
  get(target, key, receiver) {
49
    // 支持通过 raw 访问原始对象
50
    if (key === 'raw') return target;
51

52
    // 如果是数组，且访问的是 instrumentations 里的方法，返回重写后的方法
53
    if (Array.isArray(target) && arrayInstrumentations.hasOwnProperty(key)) {
54
      return arrayInstrumentations[key];
55
    }
56

57
    track(target, key);
58
    return Reflect.get(target, key, receiver);
59
  },
60
  set(target, key, newVal, receiver) {
61
    const oldVal = target[key];
62
    const type = Array.isArray(target)
63
      ? // 如果是数组，key为索引，小于length表示修改SET,大于为新增
64
        Number(key) < target
65
        ? 'SET'
66
        : 'ADD'
67
      : Object.prototype.hasOwnProperty.call(target, key)
68
        ? 'SET'
69
        : 'ADD';
70

71
    // 先set， 下面获取到的才是新的值
72
    const result = Reflect.set(target, key, newVal, receiver);
73
    // 只有当值真的变了，才触发 trigger
74
    // oldVal === oldVal || newVal === newVal  js中只要 x为NaN时， x!==x
75
    if (oldVal !== newVal && (oldVal === oldVal || newVal === newVal)) {
76
      // 关键：把 type 和 newVal 传给 trigger
77
      trigger(target, key, type, newVal);
78
    }
79

80
    return result;
81
  },
82

83
  ownKeys(target) {
84
    // 如果是数组，用 'length' 作为 key 去建立联系
85
    // 这样当 length 变化（比如 push），for...in 循环就会重新执行
86
    track(target, Array.isArray(target) ? 'length' : ITERATE_KEY);
87
    return Reflect.ownKeys(target);
88
  },
89
});
90

91
// 主流程第三步：收集依赖：存储副作用，方便后续追踪
92
function track(target, key) {
93
  // activeEffect 副作用函数没有激活， 直接return
94
  if (!activeEffect || !shouldTrack) return;
95

96
  // 把target存到桶里去 (先看桶里原来有没有)
97
  let depMap = bucket.get(target);
98
  // 没有，则添加
99
  !depMap && bucket.set(target, (depMap = new Map()));
100
  // 如果有， 则看key
101

102
  // map里存储的 key和 Set
103
  let deps = depMap.get(key);
104
  // 没有， 则添加
105
  !deps && depMap.set(key, (deps = new Set()));
106

107
  // 将当前激活的副作用添加到桶里
108
  deps.add(activeEffect);
109

110
  // 将当前副作用函数的依赖集合deps（引用地址），添加到effectFn.deps中
111
  activeEffect.deps.push(deps);
112
}
113

114
// 主流程第四步：交互修改了数据，执行副作用 触发变化
115
function trigger(target, key, type, newVal) {
116
  // 同理取出 target对应的map(存放诸多key和effect的map)
117
  const depMap = bucket.get(target);
118
  // 没有就返回
119
  if (!depMap) return;
120

121
  // 取出 key 对应的 set(effect)
122
  const effects = depMap.get(key);
123
  // 遍历执行所有副作用
124
  /*
125
    effects.forEach(fn => fn());
126
    执行fn时，先调用cleanup将函数从Set中删除，
127
    然后执行fn()又触发了track，把fn又重新加回了Set里
128
    原因：如果一个值已经被访问过了，但是这个值被删除并重新添加到集合里，
129
      如果此时forEach遍历没有结束，那么这个值会重新被访问
130
    从列表拿出一个任务-》删除任务-》执行任务-》任务又自己塞回列表末尾-》接着拿任务
131
  */
132
  // 构造一个新的set集合并遍历，防止无限循环
133
  const effectsToRun = new Set();
134

135
  // 如果trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不执
136
  // 1. 常规逻辑：把 key 对应的副作用加进去
137
  effects &&
138
    effects.forEach(effectFn => {
139
      if (effectFn !== activeEffect) {
140
        effectsToRun.add(effectFn);
141
      }
142
    });
143
  // 2.【数组新增特性】如果是数组，且操作是 ADD，说明 length 变了
144
  if (type === 'ADD' && Array.isArray(target)) {
145
    const lengthEffects = depMap.get('length');
146
    lengthEffects &&
147
      lengthEffects.forEach(effectFn => {
148
        if (effectFn !== activeEffect) effectsToRun.add(effectFn);
149
      });
150
  }
151
  // 3.【数组长度修改】如果直接修改的是 length 属性
152
  if (Array.isArray(target) && key === 'length') {
153
    // 找出所有索引 >= 新 length 的副作用，把它们触发掉（因为这些元素被删了）
154
    depMap.forEach((effects, key) => {
155
      // newVal 是修改后的数组长度
156
      if (key >= newVal) {
157
        effects.forEach(effectFn => {
158
          if (effectFn !== activeEffect) effectsToRun.add(effectFn);
159
        });
160
      }
161
    });
162
  }
163

164
  effectsToRun.forEach(effectFn => {
165
    // 如果存在调度器，则将执行权交给调度器
166
    if (effectFn.options.scheduler) {
167
      effectFn.options.scheduler(effectFn);
168
    } else {
169
      effectFn();
170
    }
171
  });
172
}
173

174
// 查找方法 (includes, indexOf)
175
// 拦截这些方法，先试着在代理对象里找，找不到再去原始对象里找。
176
const arrayInstrumentations = {};
177

178
['includes', 'indexOf', 'lastIndexOf'].forEach(method => {
179
  const originMethod = Array.prototype[method];
180
  arrayInstrumentations[method] = function (...args) {
181
    // 1. 在代理对象中查找
182
    let res = originMethod.apply(this, args);
183

184
    if (res === false || res === -1) {
185
      // 2. 找不到？通过 this.raw 拿到原始数组，再去查找
186
      res = originMethod.apply(this.raw, args);
187
    }
188
    return res;
189
  };
190
});
191

192
// 修改器方法的栈溢出 (push)
193
let shouldTrack = true; // 全局标记
194

195
// 重写 push, pop, shift, unshift, splice
196
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(method => {
197
  const originMethod = Array.prototype[method];
198
  arrayInstrumentations[method] = function (...args) {
199
    // 1. 暂停追踪
200
    shouldTrack = false;
201
    // 2. 执行原始方法
202
    const res = originMethod.apply(this, args);
203
    // 3. 恢复追踪
204
    shouldTrack = true;
205
    return res;
206
  };
207
});
208

209
// 清理旧的响应联系函数
210
function cleanup(effectFn) {
211
  // effectFn.deps 是多个 key和set的map数组
212
  for (let i = 0; i < effectFn.deps.length; i++) {
213
    // 依赖集合Set (每个具体的set，因为Set是target对应map内对应key的Set引用地址)
214
    const deps = effectFn.deps[i];
215
    // 这里其实就是删除对应依赖集合中的当前副作用函数
216
    deps.delete(effectFn);
217
  }
218
  // 重置effectFn.deps数组  没有使用=[]因为原修改减少gc优化性能
219
  effectFn.deps.length = 0;
220
}
221

222
/* 任务队列 start */
223
const jobQueue = new Set(); // 任务队列自动去重
224
const p = Promise.resolve(); // 创建一个微任务
225
let isFlushing = false; // 是否正在刷新队列
226

227
function flushJob() {
228
  if (isFlushing) return;
229
  isFlushing = true;
230

231
  p.then(() => {
232
    // 在一个微任务中一次性执行读完队列里所有的job
233
    jobQueue.forEach(job => job());
234
  }).finally(() => {
235
    isFlushing = false;
236
  });
237
}
238
/* 任务队列 end */
239

240
/* traverse 递归函数 访问所有属性 start */
241
function traverse(value, seen = new Set()) {
242
  // 原始数据或已经读取过了，就跳过
243
  if (typeof value !== 'object' || value === null || seen.has(value)) return;
244

245
  seen.add(value);
246
  for (const k in value) {
247
    traverse(value[k], seen);
248
  }
249
  return value;
250
}
251
/* traverse 递归函数 end */
252

253
/* computed start */
254
function computed(getter) {
255
  // getter为调用computed传入的副作用函数
256
  let value;
257
  let dirty = true; // 第一次需要读取计算，默认为true
258

259
  // effectFn = xxx， 也就是将effect声明中return effectFn的目的
260
  const effectFn = effect(getter, {
261
    lazy: true,
262
    scheduler() {
263
      dirty = true;
264
      // 当依赖变化时，手动触发指向 computed 对象本身的更新
265
      trigger(obj, 'value');
266
    },
267
  });
268
  const obj = {
269
    get value() {
270
      if (dirty) {
271
        //只有执行了这里  执行obj.xx， 触发track，将getter收集到依赖中
272
        value = effectFn(); // 副作用函数在dirty为true才会执行，
273
        dirty = false;
274
      }
275
      // 这里返回的value是一个普通对象的getter
276
      /*
277
        effect(() => {
278
          console.log(sum.value);
279
        });
280

281
        没有把这个effect添加到依赖中，obj.foo变了，dirty设置为了true，但是没有依赖可以触发
282

283
        原因： obj是一个普通的带有get value()的对象，没有通过new Proxy代理， 没有track可以执行，也就没法收集sum的依赖
284
      */
285
      // 读取value时，手动追踪
286
      track(obj, 'value');
287
      return value;
288
    },
289
  };
290
  return obj;
291
}
292
/* computed end */
293

294
/* watch start */
295
function watch(source, cb, options = {}) {
296
  let getter;
297
  // 如果 source 是函数，说明是 getter（如 () => obj.foo）
298
  if (typeof source === 'function') getter = source;
299
  // 如果 source 是对象，则递归遍历
300
  else getter = () => traverse(source);
301

302
  let oldVal, newVal;
303

304
  // 处理watch的异步静态问题
305
  /*
306
    1.watch 观测到了 obj.foo 的变化，发起了一个网络请求 A。
307

308
    2.请求 A 还没回来，obj.foo 又变了，触发了请求 B。
309

310
    3.结果： 请求 B 先回来了，页面渲染了新数据；过了一会儿，请求 A 才回来，旧数据把新数据覆盖了。
311
  */
312
  let cleanup;
313
  function onCleanup(fn) {
314
    cleanup = fn;
315
  }
316

317
  const job = () => {
318
    // 重新执行获取新值
319
    newVal = effectFn();
320
    // 执行回调前，先执行上一次注册的清理函数
321
    cleanup?.();
322
    // 将 onCleanup 作为第三个参数传给用户
323
    cb(newVal, oldVal, onCleanup);
324
    // 执行完之后，新的就变成老的了
325
    oldVal = newVal;
326
  };
327

328
  const effectFn = effect(
329
    // 1. 这里的副作用，在执行时触发读取，从而进行 track
330
    // () => source.foo, //  这里只能写具体的key很不方便
331
    // () => traverse(source), // 进行全量的依赖收集
332
    getter,
333
    {
334
      lazy: true,
335
      scheduler: job,
336
      /* 提取到job中
337
        scheduler() {
338
          // 2. 当source.foo 变化时， 执行回调
339
          // cb();
340
            // 重新执行获取新值
341
            newVal = effectFn();
342
            cb(oldVal, newVal);
343
            // 执行完之后，新的就变成老的了
344
            oldVal = newVal;
345
        },
346
      */
347
    }
348
  );
349

350
  // 初始执行，初始值就是旧值
351
  // oldVal = effectFn();
352
  if (options.immediate) {
353
    // 立即跑一次 job
354
    job();
355
  } else {
356
    oldVal = effectFn();
357
  }
358
}
359
/* watch end */
360

361
watch(
362
  () => obj,
363
  async (newVal, oldVal, onCleanup) => {
364
    let expired = false;
365
    console.log('数据变了', newVal, oldVal);
366
    // 注册清理函数：当 watch 即将再次触发时，这个函数会先运行
367
    onCleanup(() => {
368
      expired = true;
369
    });
370
    // 发送请求...
371
    // const res = await fetch('/api/data');
372
    // 如果已经“过期”了，说明后面又有新的请求了，就不要更新视图了
373
    if (!expired) {
374
      // data.value = res;
375
    }
376
  },
377
  { immediate: true, deep: true }
378
);
379
obj.foo = 2;
380
/*
381
  主要流程
382
  1.代理数据
383
  2.执行副作用effect(()=>{xxx})中的()=>{xxx}
384
  3.若副作用中读取响应式数据，触发track 收集依赖（副作用函数也收集到了其关联的Set）
385
  4.若交互修改了响应式数据，触发trigger执行副作用 触发变化
386
  6.清空副作用函数收集到的关联的Set,最后执行fn(因为fn里又有读取响应式数据，所所有先清空依赖再重新收集新的)
387
*/

luke's blog

reactive 实现原理#

V1 依赖追踪#

问题#

原因#

解决思路#

V2 分支切换与嵌套处理#

问题#

1.嵌套导致的 activeEffect 被覆盖#

原因#

解决思路#

2.无限递归导致栈溢出#

原因#

解决思路#

V3 调度系统#

实现思路#

v4 computed 计算属性#

基础：Lazy 延迟执行#

修改 effect 函数#

核心：实现缓存机制#

解决嵌套失效问题#

问题#

解决方案#

4.总结 computed 的运行逻辑#

5.为什么 computed 不直接用 reactive 包裹？#

V5 watch 侦听器及清理机制#

阶段一：基础侦听#

阶段二：递归观测（Traverse）#

阶段三：获取新值与旧值（New/Old Value）#

阶段四：立即执行（immediate）#

进阶：如何处理“竞态问题”与清理？#

实现 onCleanup#

使用#

watch 第一个入参的对比#

v6 数组的响应式#

索引与 length 的联动#

设置索引引发 length 变化#

trigger 的响应（反向联动）#

遍历数组 (for…in)#

查找方法 (includes, indexOf)#

修改器方法的栈溢出 (push)#

总结#

修改 `effect` 函数#

4.总结 `computed` 的运行逻辑#

5.为什么 `computed` 不直接用 `reactive` 包裹？#

实现 `onCleanup`#

索引与 `length` 的联动#

设置索引引发 `length` 变化#

`trigger` 的响应（反向联动）#

查找方法 (`includes`, `indexOf`)#