vue computed方法

//类型判断函数
const isFunction = (val) => typeof val === 'function';

function computed(getterOrOptions, debugOptions) {
    let getter;
    let setter;
    if (isFunction(getterOrOptions)) {
        getter = getterOrOptions;
        //computed不能执行设置值的操作
        // setup(){
        //     onMounted(()=>{
        //       num.value = 2
        //       console.log(num)
        //     })
        //     const num = computed(()=>{
        //       return 1
        //     })
        // }
        //这个时候控制台会提示错误 并且num的值也不会改变
        setter = () => {console.warn('Write operation failed: computed value is readonly');}
    }
    else {
        getter = getterOrOptions.get;
        setter = getterOrOptions.set;
    }
    // isFunction(getterOrOptions) 值为true
    console.log(!getterOrOptions.set)  //传入的值为true 因为getterOrOptions.set 值为undefined 
    const cRef = new ComputedRefImpl(getter, setter, isFunction(getterOrOptions) || !getterOrOptions.set);

    //外部传入的debug操作模式 平时用的不多
    if (debugOptions) {
        cRef.effect.onTrack = debugOptions.onTrack;
        cRef.effect.onTrigger = debugOptions.onTrigger;
    }
    return cRef;
}
//转换成原始值
function toRaw(observed) {
    const raw = observed && observed["__v_raw"];
    return raw ? toRaw(raw) : observed;
}
let shouldTrack = true;
let activeEffect;
//函数初始化时一般返回值为 false
function isTracking() {
    return shouldTrack && activeEffect !== undefined;
}
function trackRefValue(ref) {
    //第一次进来不执行
    if (isTracking()) {
        console.log('创建dep')
        ref = toRaw(ref);
        if (!ref.dep) {
            ref.dep = createDep();
        }
        {
            trackEffects(ref.dep, {
                target: ref,
                type: "get" /* GET */,
                key: 'value'
            });
        }
    }
}
function trackEffects(dep, debuggerEventExtraInfo) {
    let shouldTrack = false;
    if (effectTrackDepth <= maxMarkerBits) {
        if (!newTracked(dep)) {
            dep.n |= trackOpBit; // set newly tracked
            shouldTrack = !wasTracked(dep);
        }
    }
    else {
        // Full cleanup mode.
        shouldTrack = !dep.has(activeEffect);
    }
    if (shouldTrack) {
        dep.add(activeEffect);
        activeEffect.deps.push(dep);
        if (activeEffect.onTrack) {
            activeEffect.onTrack(Object.assign({
                effect: activeEffect
            }, debuggerEventExtraInfo));
        }
    }
}

//实例化计算属性的类 传入getter 和setter 
class ComputedRefImpl {
    constructor(getter, _setter, isReadonly) {
        this._setter = _setter; //把setter函数传进来给实例
        this.dep = undefined;
        this._dirty = true;
        this.__v_isRef = true;  //设置了 __v_isRef属性 
        this.effect = new ReactiveEffect(getter, () => {
            //初始化的构造函数这一段代码不执行 获取值的时候就会被执行
            if (!this._dirty) {
                this._dirty = true;
                triggerRefValue(this);
            }
        });
        this["__v_isReadonly" /* IS_READONLY */] = isReadonly;   //设置为只读属性
        this.fn = getter   //这个是自己添加的一种实现方式
    }
    get value() {
        console.log('获取value的值')
        // the computed ref may get wrapped by other proxies e.g. readonly() #3376
        const self = toRaw(this);
        console.log(self._value,'拦截到的值')
        trackRefValue(self);
        if (self._dirty) {
            self._dirty = false;
            self._value = self.effect.run();
            // self._value = self.fn() //函数直接调用getter 不去进行栈的track跟踪    console.log(num.value,'返回的num值')
            //同样也可以获取到 num.value设置的值
        }
        return self._value;
    }
    set value(newValue) {
        this._setter(newValue);
        //如果想要调用set 拦截value操作 就会直接执行下面传入的函数
        // setter = () => {console.warn('Write operation failed: computed value is readonly');}
    }
}
let activeEffectScope;     //值为undefined
const effectStack = []
const trackStack = []
let trackOpBit = 1;
let effectTrackDepth = 0;
const maxMarkerBits = 30;

function recordEffectScope(effect, scope) {
    console.log(effect,'effect传入的this对象')
    console.log(scope,'传入的scope') //控制台输出undefined
    scope = scope || activeEffectScope;   //这里可以得到scope为undefined 
    //这段代码不被执行,因为scope为undefined
    if (scope && scope.active) {
        scope.effects.push(effect);
    }
}
function enableTracking() {
    trackStack.push(shouldTrack);
    shouldTrack = true;
}
const initDepMarkers = ({ deps }) => {
    console.log(deps.length,'deps.length')  
    if (deps.length) {
        for (let i = 0; i < deps.length; i++) {
            deps[i].w |= trackOpBit; // set was tracked
        }
    }
}
function cleanupEffect(effect) {
    const { deps } = effect;
    if (deps.length) {
        for (let i = 0; i < deps.length; i++) {
            deps[i].delete(effect);
        }
        deps.length = 0;
    }
}

const wasTracked = (dep) => (dep.w & trackOpBit) > 0
const newTracked = (dep) => (dep.n & trackOpBit) > 0
const finalizeDepMarkers = (effect) => {
    const { deps } = effect;
    if (deps.length) {
        let ptr = 0;
        for (let i = 0; i < deps.length; i++) {
            const dep = deps[i];
            if (wasTracked(dep) && !newTracked(dep)) {
                dep.delete(effect);
            }
            else {
                deps[ptr++] = dep;
            }
            // clear bits
            dep.w &= ~trackOpBit;
            dep.n &= ~trackOpBit;
        }
        deps.length = ptr;
    }
}
function resetTracking() {
    const last = trackStack.pop();
    shouldTrack = last === undefined ? true : last;
}
class ReactiveEffect {
    //把getter 当作函数传进来 第二个箭头函数 
    constructor(fn, scheduler = null, scope) {
        console.log(scope,'scope')   //scope 没有传值的话就为undefined
        console.log(fn,'fn函数')
        console.log(scheduler,'scheduler回调函数')
        this.fn = fn;    //getter() 函数
        this.scheduler = scheduler;
        this.active = true;
        this.deps = [];
        recordEffectScope(this, scope);
    }
    run() {
        //不执行
        if (!this.active) {
            return this.fn();
        }
        //写入effectStack栈中
        console.log(!effectStack.includes(this),'effectStack的值')   //值为undefined
        if (!effectStack.includes(this)) {
            try {
                // effectStack.push((activeEffect = this));
                // console.log(effectStack,'effectStack')
                // enableTracking();
                // trackOpBit = 1 << ++effectTrackDepth;
                // console.log(trackOpBit,'trackOpBit字节数')
                // if (effectTrackDepth <= maxMarkerBits) {
                //     console.log('init')
                //     initDepMarkers(this);
                // }
                // else {
                //     cleanupEffect(this);
                // }
                console.log(this.fn(),'this.fn()函数')  //此处可以获取到计算属性的值
                return this.fn();
            }
            
            finally {
                if (effectTrackDepth <= maxMarkerBits) {
                    finalizeDepMarkers(this);
                }
                trackOpBit = 1 << --effectTrackDepth;
                resetTracking();
                effectStack.pop();
                const n = effectStack.length;
                activeEffect = n > 0 ? effectStack[n - 1] : undefined;

                console.log(activeEffect,'activeEffect的值')
            }
        }
    }
    // stop() {
    //     if (this.active) {
    //         cleanupEffect(this);
    //         if (this.onStop) {
    //             this.onStop();
    //         }
    //         this.active = false;
    //     }
    // }
}

var num = computed(()=>{
    return 'sssssssssssssssssssss'
})
console.log(num.value,'返回的num值')

调用setter()函数时