vue3原理和源码分析 - ref源代码

目录

Ref

@/packages/reactivity/src/dep.ts

@/packages/reactivity/src/effect.ts

@/packages/reactivity/src/ref.ts

---

Ref

@/packages/reactivity/src/dep.ts

// @/packages/reactivity/src/dep.ts
// vue对依赖的封装
// 一个依赖就是对函数的封装
createDep(effects ?: ReactiveEffect[]) : Dep =>{
   const dep = new Set<ReactiveEffect>(effects) as Dep // Dep只是集合的别名
   dep.w = 0
   dep.n =0
   return dep
}// 创建依赖

@/packages/reactivity/src/effect.ts

// @/packages/reactivity/src/effect.ts
class ReactiveEffect<T = any> { // 每个都是要执行的任务
    active = true
    deps :  Dep[]=[]
    // can be attached after creation
    computed?: boolean
    allowRecurse?: boolean
    onStop?: ()=>void
    // dev only
    onTrack?: (event: DebuggerEvent)=>void
    // dev only
    onTrigger?: (event: DebuggerEvent)=>void
    // 上面那些变量都在fn里，泛型T，包含这些类型
    constructor(
        public fn: ()=>T, // 副作用函数
        public scheduler: EffectScheduler|null=null,
        scope?: EffectScope |null) {
            recordEffectScope(this,scope)
    }
    
    run() {
        if (!this.active) {
    		return this.fn() // 调用副作用函数，会调用其他的函数
      	 } 
        if (!effectStack.includes(this)) {
             // 调用栈
             // 副作用函数压栈
             // 副作用函数执行      
        }
    }
    
}

@/packages/reactivity/src/ref.ts

// ref(0) // createRef() 这个ref是个class
function ref(value?:unknown) {
    return createRef(value, false)
}
function createRef(rawValue: unknown, shallow: boolean) {
    if(isRef(rawValue)) {
        return rawValue    
    }
    return new RefImpl(rawValue, shallow)
}
class RefImpl<T> {
    constructor() {
            
    }
    get value() {
    	trackRefValue(this) 
       // => trackEffects(ref.dep) 跟踪依赖 
       // => dep.add(activeEffect!)
       // activeEffect全局变量，是个依赖函数
    }
    set value(newVal) {
        if(hasChange(newVal, this._raWValue)) { // 值变了
            triggerRefValue()
            // => triggerEffects(ref.dep) 跟踪依赖 
            // => for(effect of isArray(dep)) =>
            // effect.scheduler && return effect.scheduler() // 调度器=>  延迟执行
            // effect.run()       
        }
      
    }
}