模拟实现vue3.x中的计算属性

前言

计算属性，功能和vue2.x基本等同，本文主要对其功能进行模拟实现

一.完整代码

const reactMap = new WeakMap();
const ReactiveFlags = {
    IS_REACTIVE : "isReactive"
}

let activeEffect = undefined;
class ReactiveEffect {
    active = true;
    deps = [];
    constructor(fn,scheduler) {
        this.fn = fn;
        this.scheduler = scheduler;
    }
    run() {
        if(!this.active) {this.fn()};
        try {
            activeEffect = this;
            return this.fn()
        } finally {
            activeEffect = undefined;
        }
    }
}

class ComputedRefImpl {
    effect;
    _value;
    dep = new Set();
    _dirty = true;
    _v_isReadOnly = true;
    _v_isRef = true;
    constructor(getter,setter) {
        this.effect = new ReactiveEffect(getter, () => {
            // 稍后依赖的属性变化会执行此调度函数
            if(!this._dirty) {
                this._dirty = true;
                triggerEffect(this.dep)
            }
        })
    }
    get value() {
        trackEffect(this.dep)
        if(this._dirty) {
            this._dirty = false;
            this._value = this.effect.run()
        }
        return this._value
    }

}

function effect(fn) {
    const _effect = new ReactiveEffect(fn);
    _effect.run();
    // computed新增
    const runner = _effect.run.bind(_effect);
    runner.effect = runner;
    return runner
}
// 将数据转化成响应式的数据，只能做对象的代理
function reactive(target) {
    if(!(typeof target === 'object' && target !== null)) {
        return;
    }
    if(target[ReactiveFlags.IS_REACTIVE]) {
        return target
    }
    let exisProxy = reactMap.get(target);
    if(exisProxy) {
        return exisProxy
    }
    const proxy = new Proxy(target,{
        get(target,key,receiver) {
        	if(key === ReactiveFlags.IS_REACTIVE) {
        		return true
        	}
            track(target,'get',key)
            return Reflect.get(target,key,receiver)
        },
        set(target,key,value,receiver) {
            let oldValue = target[key];
            let result = Reflect.set(target,key,value,receiver);
            if(oldValue !== value) {
                trigger(target,'set',key,oldValue,value)
            }
            return result 
        }
    });
    reactMap.set(target,proxy)
    return proxy
}

// 计算属性
function computed(getterOrOptions) {
    let onlyGetter = typeof getterOrOptions === 'function'
    let getter;
    let setter;
    if(onlyGetter) {
        getter = getterOrOptions;
        setter = () => {console.warn('no set')}
    } else {
        const {get,set} =getterOrOptions;
        [getter,setter] = [get,set]
    }
    return new ComputedRefImpl(getter,setter)
}

const targetMap = new WeakMap()

function trigger(target,type,key,oldValue,value) {
    const depsMap = targetMap.get(target);
    if(!depsMap) return;
    const effects = depsMap.get(key);
    triggerEffect(effects,'effects')
}

function triggerEffect(effects) {
    effects && effects.forEach(effect => {
        if(effect.scheduler) {
            effect.scheduler()
        } else {
            effect.run()
        }
    })
}

function track(target,type,key) {
    if(!activeEffect) return ;
    let depsMap = targetMap.get(target);
    if(!depsMap) {
        targetMap.set(target,(depsMap = new Map()))
    }
    let dep = depsMap.get(key);
    if(!dep) {
        depsMap.set(key,(dep = new Set()))
    }
    trackEffect(dep)
}

function trackEffect(dep) {
    if(activeEffect) {
        let shouldTrack =!dep.has(activeEffect);
        if(shouldTrack) {
            dep.add(activeEffect)
            activeEffect.deps.push(dep);
        }
    }
}

const target ={name: 'sandy',age: 18,height: 195};
const r1 = reactive(target);

const formatData = computed (() => {
    const {name,age} = r1;
    return `format123 ${name},${age}`
})
effect(() => {
    const { value } = formatData;
    console.log(`effect ${value}`)
})
setTimeout(() => {
    r1.name = 'wendy'
},2000)

// setTimeout(() => {
//     console.log(formatData.value,'formatData.value')
// },3000)

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

二. 调度器

为的是方便于当监听值改变后，自定义逻辑代码

//声明
 constructor(getter,setter) {
        this.effect = new ReactiveEffect(getter, () => {
            // 稍后依赖的属性变化会执行此调度函数
            if(!this._dirty) {
                this._dirty = true;
                triggerEffect(this.dep)
            }
        })
 }
 //调用
 function triggerEffect(effects) {
    effects && effects.forEach(effect => {
        if(effect.scheduler) {
            effect.scheduler()
        } else {
            effect.run()
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三. 计算属性逻辑梳理

1. 相关调用代码

const target ={name: 'sandy',age: 18,height: 195};
const r1 = reactive(target);

const formatData = computed (() => {
    const {name,age} = r1;
    return `format123 ${name},${age}`
})
effect(() => {
    const { value } = formatData;
    console.log(`effect ${value}`)
})
setTimeout(() => {
    r1.name = 'wendy'
},2000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 逻辑梳理及触发顺序
   1. computed里面的函数执行，并完成初始化操作，此时fn和调度器均已完成初始化操作；
   2. effect里面的函数立即执行一次，因为函数里面访问了计算属性的value属性，所以会先访问ComputedRefImpl类中的get;
   3. trackEffect(this.dep) 和 this._value = this.effect.run()完成了响应数据属性的依赖收集；
   4. 当2s之后改变属性值之后，会先触发proxy中的set，调用完成的trigger函数，然后再触发ComputedRefImpl类中的调度器函 数；
   5. 调度器函数执行完之后，则computed计算属性更新完毕，则继续执行effcet中函数的代码逻辑。

总结：因为effcet函数作用域使用了计算属性的值，所以核心代码逻辑是 ：响应数据更改 ——》计算属性值更改 ——》effect执行完毕

四. 计算属性的缓存特性实现

声明了_dirty属性，_dirty默认为true，当_dirty为true时，则表明需重新计算，为false时，不需要重新计算。
当属性值改变时，在调度器中将_dirty设置为true，表示之后访问时需要重新计算；
当访问了计算属性的value之后，表示已经访问过了，不需要重新计算，将_dirty设置为false