vue3 - 响应式学习#

1
const buckect = new Set(); // 桶
2

3
const data = {
4
  a: 1,
5
};
6

7
const obj = new Proxy(data, {
8
  get(target, key) {
9
    buckect.add(effect);
10
    return target[key];
11
  },
12
  set(target, key, newVal) {
13
    target[key] = newVal;
14
    // 取出副作用函数effect
15
    buckect.forEach((fn) => fn());
16
    return true;
17
  },
18
});
19

20
const effect = () => {
21
  document.body.innerText = obj.a;
22
};
23

24
effect();
25

26
setTimeout(() => {
27
  obj.a = 2;
28
}, 2000);

1
get(target, key){
2
    // 如果没有 activeEffect说明没有注册过这个副作用函数，直接return
3
    if(!activeEffect) return; // ➕
4
    // 根据targt代理引用，取得它对应的map，对应关系target --- > Map
5
    const depsMap = buckect.get(target); // ➕
6
    // 假如说这个map不存在，那么就new一个map，与target引用关联
7
    if(!depsMap) { // ➕
8
        buckect.set(target, (depsMap = new Map())) // ➕
9
    }
10
    // 再根据key从map中取得key对应的Set，key ---> Set
11
    // Set里头存储了这个key对应的副作用函数
12
    const deps = depsMap.get(key); // ➕
13
    if(!deps){ // ➕
14
        depsMap.set(key, (deps = new Set())) // ➕
15
    }
16
    // 最后将activeEffect加入到key对应的Set当中
17
    deps.add(activeEffect);// ➕
18

19
    // 返回函数属性
20
    return target[key]
21
},

1
 set(target, key, newVal){
2
    target[key] = newVal;
3

4
    // 根据target引用从桶中取得对应的Map
5
    const depsMap = buckect.get(target); // ➕
6
    if(!depsMap) return; // ➕
7
    // 取得target 上key对应的Set数据，遍历，执行里头的副作用
8
    const effects = depsMap.get(key);// ➕
9
    if(effects){
10
        effects.forEach(fn => fn())
11
    }
12
    return true
13
}

1
let activeEffect;
2

3
// 注册函数
4
function effect(fn){
5
    activeEffect = fn;
6
    fn();
7
}
8

9
function track(target,key){
10
    // 如果没有 activeEffect说明没有注册过这个副作用函数，直接return
11
    if(!activeEffect) return;
12
    // 根据targt代理引用，取得它对应的map，对应关系target --- > Map
13
    let depsMap = buckect.get(target);
14
    // 假如说这个map不存在，那么就new一个map，与target引用关联
15
    if(!depsMap) {
16
        buckect.set(target, (depsMap = new Map()))
17
    }
18
    // 再根据key从map中取得key对应的Set，key ---> Set
19
    // Set里头存储了这个key对应的副作用函数
20
    let deps = depsMap.get(key);
21
    if(!deps){
22
        depsMap.set(key, (deps = new Set()))
23
    }
24
    // 最后将activeEffect加入到key对应的Set当中
25
    deps.add(activeEffect);
26
}
27

28
function trigger(target, key){
29
    // 根据target引用从桶中取得对应的Map
30
    const depsMap = buckect.get(target);
31
    if(!depsMap) return;
32
    // 取得target 上key对应的Set数据，遍历，执行里头的副作用
33
    const effects = depsMap.get(key);
34
    if(effects){
35
        effects.forEach(fn => fn())
36
    }
37
}
38

39

40
const obj = new Proxy(data, {
41
    get(target, key){
42
        track(target,key)
43
        // 返回函数属性
44
        return target[key]
45
    },
46
    set(target, key, newVal){
47
        target[key] = newVal;
48
        trigger(target, key)
49
    }
50
})

1
// 注册函数
2
function effect(fn){
3
    const effectFn = ()=>{
4
        activeEffect = effectFn;
5
        fn();
6
    }
7
    // 用于存储所有与该副作用函数相关的依赖合集 bucket桶中 key---> Set 的 Set集合
8
    effectFn.deps = []; // deps: Array<Set>
9
    effectFn();
10
}

1
function track(target,key){
2
    // 如果没有 activeEffect说明没有注册过这个副作用函数，直接return
3
    if(!activeEffect) return;
4
    // 根据targt代理引用，取得它对应的map，对应关系target --- > Map
5
    let depsMap = buckect.get(target);
6
    // 假如说这个map不存在，那么就new一个map，与target引用关联
7
    if(!depsMap) {
8
        buckect.set(target, (depsMap = new Map()))
9
    }
10
    // 再根据key从map中取得key对应的Set，key ---> Set
11
    // Set里头存储了这个key对应的副作用函数
12
    let deps = depsMap.get(key);
13
    if(!deps){
14
        depsMap.set(key, (deps = new Set()))
15
    }
16
    // 最后将activeEffect加入到key对应的Set当中
17
    deps.add(activeEffect);
18
    // 将 集合 Set 的引用推入 副作用函数的deps集合里头 ➕
19
    activeEffect.caller.deps.push(deps); // ➕
20
}

1
function cleanup(effectFn){
2
    for (let i = 0; i < effectFn.caller.deps.length; i++) {
3
        const deps = effectFn.deps[i];
4
        // 将 effectFn 从依赖集合从移除
5
        deps.delete(effectFn)
6
    }
7
    // 最后重置一下 deps
8
    effectFn.deps.length = 0
9
}
10

11
// 注册函数
12
function effect(fn){
13
    const effectFn = ()=>{
14
        cleanup(effectFn)
15
        activeEffect = effectFn;
16
        fn();
17
    }
18
    // 用于存储所有与该副作用函数相关的依赖合集 bucket桶中 key---> Set 的 Set集合
19
    effectFn.deps = [];
20
    effectFn();
21
}

1
function trigger(target, key){
2
    // 根据target引用从桶中取得对应的Map
3
    const depsMap = bucket.get(target);
4
    if(!depsMap) return;
5
    // 取得target 上key对应的Set数据，遍历，执行里头的副作用
6
    const effects = depsMap.get(key);
7
    if(effects){
8
        effects.forEach(fn => fn()); // 问题所在， 遍历的时候在执行副作用，执行的时候又被收集进去到同一个Set当中了，所以我们可以使这个遍历的effects Set更换为另外一个引用
9
    }
10
}

1
function trigger(target, key){
2
    // 根据target引用从桶中取得对应的Map
3
    const depsMap = bucket.get(target);
4
    if(!depsMap) return;
5
    // 取得target 上key对应的Set数据，遍历，执行里头的副作用
6
    const effects = depsMap.get(key);
7
    if(effects){
8
        const effectsClone = new Set(effects)  // ➕
9
        effectsClone.forEach(fn => fn()); // ➕
10
    }
11
}

1
      const data = {
2
        a: true,
3
        b: "weng",
4
      };
5

6
      const obj = new Proxy(data, {
7
        get(target, key) {
8
          track(target, key);
9
          // 返回函数属性
10
          return target[key];
11
        },
12

13
        set(target, key, newVal) {
14
          target[key] = newVal;
15
          trigger(target, key);
16
        },
17
      });
18

19
      function someFn() {
20
        console.log(obj.a ? obj.b : "yes!");
21
        console.log("触发了", bucket);
22
      }
23

24
      effect(someFn);
25

26
      obj.a = false;
27

28
      setTimeout(() => {
29
        obj.b = "kaimin"; // 修改b值的时候，不会再触发someFn了
30
      }, 1000);

1
// 全局加入effectStack栈结构
2
let effectStack=[]

1
// 注册函数
2
function effect(fn){
3
    const effectFn = ()=>{
4
        cleanup(effectFn)
5
        // 当调用effect注册副作用函数时，将副作用函数复制给activeEffect
6
        activeEffect = effectFn;
7
        // 在调用副作用函数之前将当前副作用函数压入栈中
8
        effectStack.push(effectFn) // ➕
9
        fn();
10
        effectStack.pop(); // ➕
11
        // 执行完之后，弹出栈，并把activeEffect还原为之前的值, 指向栈顶
12
        activeEffect = effectStack[effectStack.length - 1] // ➕
13
    }
14
    // 用于存储所有与该副作用函数相关的依赖合集 bucket桶中 key---> Set 的 Set集合
15
    effectFn.deps = [];
16
    effectFn();
17
}

1
function someFn(){
2
  const b = obj.a + ....;
3
     obj.a = b;
4
}

1
function trigger(target, key){
2
    // 根据target引用从桶中取得对应的Map
3
    const depsMap = buckect.get(target);
4
    if(!depsMap) return;
5
    // 取得target 上key对应的Set数据，遍历，执行里头的副作用
6
    const effects = depsMap.get(key);
7

8
    const effectsToRun = new Set();
9

10
    if(effects){
11
        effects.forEach((current)=>{
12
            if(current !== activeEffect){
13
                // 如果当前trigger执行的，和activeEffect不一样，加入
14
                effectsToRun.add(current)
15
            }
16
        })
17
    }
18
    effectsToRun.forEach((fn)=>fn())
19
}

1
const data = {
2
    a: 1,
3
};
4

5
const obj = new Proxy(data, {
6
    get(target, key) {
7
        track(target, key);
8
        // 返回函数属性
9
        return target[key];
10
    },
11

12
    set(target, key, newVal) {
13
        target[key] = newVal;
14
        trigger(target, key);
15
    },
16
});
17

18
function someFn() {
19
   console.log((obj.a = obj.a + 1)); // 不会爆栈了
20
}
21

22
effect(someFn);
23

24

25
setTimeout(()=>{
26
    obj.a = 3; // 正常触发收集到的副作用函数
27
})

1
// 注册函数
2
function effect(fn, options){ // ➕
3
    const effectFn = ()=>{
4
        cleanup(effectFn)
5
        // 当调用effect注册副作用函数时，将副作用函数复制给activeEffect
6
        activeEffect = effectFn;
7
        // 在调用副作用函数之前将当前副作用函数压入栈中
8
        effectStack.push(effectFn)
9
        fn();
10
        // 执行完之后，弹出栈，并把activeEffect还原为之前的值, 指向栈顶
11
        activeEffect = effectStack[effectStack.length - 1] // ➕
12
    }
13
    // 将调度相关的参数加入到副作用函数当中
14
    effectFn.options = options; // ➕
15
    // 用于存储所有与该副作用函数相关的依赖合集 bucket桶中 key---> Set 的 Set集合
16
    effectFn.deps = [];
17
    effectFn();
18
}

1
function trigger(target, key){
2
    // 根据target引用从桶中取得对应的Map
3
    const depsMap = buckect.get(target);
4
    if(!depsMap) return;
5
    // 取得target 上key对应的Set数据，遍历，执行里头的副作用
6
    const effects = depsMap.get(key);
7

8
    const effectsToRun = new Set();
9

10
    if(effects){
11
        effects.forEach((current)=>{
12
            if(current !== activeEffect){
13
                // 如果当前trigger执行的，和activeEffect不一样，加入
14
                effectsToRun.add(current)
15
            }
16
        })
17
    }
18
    effectsToRun.forEach((fn)=>{
19
        if(fn.options.scheduler){ // ➕
20
            fn.options.scheduler(fn) // ➕
21
        }else{
22
            fn()
23
        }
24
    })
25
}

1
const data = {
2
    a: 1,
3
};
4

5
const obj = new Proxy(data, {
6
    get(target, key) {
7
        track(target, key);
8
        // 返回函数属性
9
        return target[key];
10
    },
11

12
    set(target, key, newVal) {
13
        target[key] = newVal;
14
        trigger(target, key);
15
    },
16
});
17

18
function someFn() {
19
    console.log(obj.a);
20
}
21

22
effect(someFn, {
23
    scheduler(fn) {
24
        setTimeout(() => {
25
            fn();
26
        }, 0);
27
    },
28
});
29

30
obj.a++;
31

32
console.log("我是分割");

1
// 定义任务队列
2
const jobQueue = new Set();
3
// 使用promise.resolve创建微任务，添加到微任务队列
4
const p = Promise.resolve();
5

6
// 一个标志代表是否正在刷新队列
7
let isFlushing = false;
8
function flushJob(){
9
    // 如果队列正在刷新，则什么都不做
10
    if(isFlushing) return;
11
    // 设置true, 代码正在刷新
12
    isFlushing = true;
13
    // 在微任务队列中刷新 jobQueue 队列
14
    p.then(()=>{
15
        jobQueue.forEach((fn => fn()))
16
    }).finally(()=>{
17
        // 结束后重置isFlushing
18
        isFlushing = false;
19
    })
20
}

1
effect(someFn, {
2
    scheduler(fn){
3
        // 每次调度时，将副作用函数添加到jobQueue队列中
4
        jobQueue.add(fn);
5

6
        // 调用 flushJob 刷新队列
7
        flushJob();
8
    }
9
})

1
const data = { a: 1 };
2

3
const obj = new Proxy(data, {...});
4

5
function someFn(){
6
    console.log(obj.a)
7
}
8

9
effect(someFn, {
10
    scheduler(fn) {
11
          jobQueue.add(fn);
12
          flushJob();
13
    },
14
})
15

16
obj.a++;
17
obj.a++;
18
obj.a++;
19

20

21
// 最终只会打印1 4

1
let activeEffect;
2

3
const effectStack = [];
4

5
const buckect = new WeakMap();
6

7

8
const source = {
9
    a: 'wengkaimin',
10
    b: 'weng'
11
}
12

13

14
// 定义任务队列
15
const jobQueue = new Set();
16
// 使用promise.resolve创建微任务，添加到微任务队列
17
const p = Promise.resolve();
18

19
// 一个标志代表是否正在刷新队列
20
let isFlushing = false;
21
function flushJob(){
22
    // 如果队列正在刷新，则什么都不做
23
    if(isFlushing) return;
24
    // 设置true, 代码正在刷新
25
    isFlushing = true;
26
    // 在微任务队列中刷新 jobQueue 队列
27
    p.then(()=>{
28
        jobQueue.forEach((fn => fn()))
29
    }).finally(()=>{
30
        // 结束后重置isFlushing
31
        isFlushing = false;
32
    })
33
}
34

35
function cleanup(effectFn){
36
    for (let i = 0; i < effectFn.deps.length; i++) {
37
        const deps = effectFn.deps[i];
38
        // 将 effectFn 从依赖集合从移除
39
        deps.delete(effectFn)
40
    }
41
    // 最后重置一下 deps
42
    effectFn.deps.length = 0
43
}
44

45
// 注册函数
46
function effect(fn, options){ // ➕
47
    const effectFn = ()=>{
48
        cleanup(effectFn);
49
        // 当调用effect注册副作用函数时，将副作用函数复制给activeEffect
50
        activeEffect = effectFn;
51
        // 在调用副作用函数之前将当前副作用函数压入栈中
52
        effectStack.push(effectFn);
53
        fn();
54
        // 执行完之后，弹出栈，并把activeEffect还原为之前的值, 指向栈顶
55
        activeEffect = effectStack[effectStack.length - 1];  // ➕
56
    }
57
    // 将调度相关的参数加入到副作用函数当中
58
    effectFn.options = options; // ➕
59
    // 用于存储所有与该副作用函数相关的依赖合集 bucket桶中 key---> Set 的 Set集合
60
    effectFn.deps = [];
61
    effectFn();
62
}
63

64

65
function someFn(){
66
    console.log(source.a)
67
}
68

69
function someFn2(){
70
    console.log(source.a)
71
}
72

73
effect(someFn, {
74
    scheduler(fn){
75
        // 每次调度时，将副作用函数添加到jobQueue队列中
76
        jobQueue.add(fn);
77

78
        // 调用 flushJob 刷新队列
79
        flushJob();
80
    }
81
})
82

83

84
function track(target,key){
85
    // 如果没有 activeEffect说明没有注册过这个副作用函数，直接return
86
    if(!activeEffect) return;
87
    // 根据targt代理引用，取得它对应的map，对应关系target --- > Map
88
    let depsMap = buckect.get(target);
89
    // 假如说这个map不存在，那么就new一个map，与target引用关联
90
    if(!depsMap) {
91
        buckect.set(target, (depsMap = new Map()))
92
    }
93
    // 再根据key从map中取得key对应的Set，key ---> Set
94
    // Set里头存储了这个key对应的副作用函数
95
    let deps = depsMap.get(key);
96
    if(!deps){
97
        depsMap.set(key, (deps = new Set()))
98
    }
99
    // 最后将activeEffect加入到key对应的Set当中
100
    deps.add(activeEffect);
101
    // 将 集合 Set 的引用推入 副作用函数的deps集合里头
102
    activeEffect.deps.push(deps);
103
}
104

105
function trigger(target, key){
106
    // 根据target引用从桶中取得对应的Map
107
    const depsMap = buckect.get(target);
108
    if(!depsMap) return;
109
    // 取得target 上key对应的Set数据，遍历，执行里头的副作用
110
    const effects = depsMap.get(key);
111

112
    const effectsToRun = new Set();
113

114
    if(effects){
115
        effects.forEach((current)=>{
116
            if(current !== activeEffect){
117
                // 如果当前trigger执行的，和activeEffect不一样，加入
118
                effectsToRun.add(current)
119
            }
120
        })
121
    }
122
    effectsToRun.forEach((fn)=>{
123
        if(fn.options.scheduler){ // ➕调度器
124
            fn.options.scheduler(fn) // ➕调度器
125
        }else{
126
            fn()
127
        }
128
    })
129
}
130

131
const obj = new Proxy(data, {
132
    get(target, key){
133
        track(target,key)
134
        // 返回函数属性
135
        return target[key]
136
    },
137
    set(target, key, newVal){
138
        target[key] = newVal;
139
        trigger(target, key)
140
    }
141
})

1
// 注册函数
2
function effect(fn, options){
3
    const effectFn = ()=>{
4
        cleanup(effectFn);
5
        // 当调用effect注册副作用函数时，将副作用函数复制给activeEffect
6
        activeEffect = effectFn;
7
        // 在调用副作用函数之前将当前副作用函数压入栈中
8
        effectStack.push(effectFn);
9
        const res = fn(); // ➕
10
        effectStack.pop();
11

12
        // 执行完之后，弹出栈，并把activeEffect还原为之前的值, 指向栈顶
13
        activeEffect = effectStack[effectStack.length - 1];
14
        return res; // ➕ 将函数执行结果返回出去，实现getter的效果
15
    }
16
    // 将调度相关的参数加入到副作用函数当中
17
    effectFn.options = options;
18
    // 用于存储所有与该副作用函数相关的依赖合集 bucket桶中 key---> Set 的 Set集合
19
    effectFn.deps = [];
20
    // 如果options中 lazy为false，才立即执行副作用函数
21
    if(!options.lazy){
22
        effectFn();
23
    }
24
    return effectFn // 将副作用函数作为返回值返回出去
25
}

1
const data = {
2
    a: 1,
3
};
4

5
const obj = new Proxy(data, {
6
    get(target, key) {
7
        track(target, key);
8
        // 返回函数属性
9
        return target[key];
10
    },
11

12
    set(target, key, newVal) {
13
        target[key] = newVal;
14
        trigger(target, key);
15
    },
16
});
17

18
function someFn() {
19
    console.log("执行了getter");
20
    return obj.a + 1;
21
}
22

23
const computedData = computed(someFn);
24

25
console.log(computedData.value);
26

27
setTimeout(() => {
28
    obj.a = 3; // 在改变值得的时候也会做到同步的重新计算
29
}, 2000);