let activeEffect;classDep{constructor(value){this.subscribes =newSet()this._value = value
}getvalue(){this.depend()returnthis._value
}setvalue(newValue){this._value = newValue
this.notify()}depend(){if(activeEffect){this.subscribes.add(activeEffect)}}notify(){this.subscribes.forEach(effect=>{effect()})}}functionwatchEffect(effect){
activeEffect = effect
effect()
activeEffect =null}const dep =newDep('hello!')watchEffect(()=>{
console.log(dep.value)// hello!})
dep.value ='change!'// change!
Object.defineProperty
let activeEffect;classDep{
subscribes =newSet()depend(){if(activeEffect){this.subscribes.add(activeEffect)}}notify(){this.subscribes.forEach(effect=>{effect()})}}functionwatchEffect(effect){
activeEffect = effect
effect()
activeEffect =null}functionreactive(raw){
Object.keys(raw).forEach(key=>{const dep =newDep()let value = raw[key]
Object.defineProperty(raw, key,{get(){
dep.depend()return value
},set(newValue){
value = newValue
dep.notify()}})})return raw
}const state =reactive({count:1})watchEffect(()=>{
console.log(state.count)})
state.count++
Proxy
let activeEffect;classDep{
subscribes =newSet()depend(){if(activeEffect){this.subscribes.add(activeEffect)}}notify(){this.subscribes.forEach(effect=>{effect()})}}functionwatchEffect(effect){
activeEffect = effect
effect()
activeEffect =null}const targetMap =newWeakMap()functiongetDep(target, key){let depMap = targetMap.get(target)if(!depMap){
depMap =newMap()
targetMap.set(target, depMap)}let dep = depMap.get(key)if(!dep){
dep =newDep()
depMap.set(key, dep)}return dep
}const reactiveHandlers ={get(target, key, receiver){const dep =getDep(target, key)
dep.depend()return Reflect.get(target, key, receiver)},set(target, key, value, receiver){const dep =getDep(target, key)let result = Reflect.set(target, key, value, receiver)
dep.notify()return result
}}functionreactive(raw){returnnewProxy(raw, reactiveHandlers)}const state =reactive({count:1})watchEffect(()=>{
console.log(state.count)})
state.count++