[[425939]]

響應(yīng)式原理架構(gòu)圖

圖片來(lái)源:__mxin

前置基礎(chǔ)知識(shí)

• Proxy (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
• Reflect (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect)
• WeakMap (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)

源碼講解

reactivepackages/reactivity/src/reactive.ts

// 擴(kuò)展被代理對(duì)象的標(biāo)志屬性聲明 
export interface Target { 
  [ReactiveFlags.SKIP]?: boolean //是否是不可代理對(duì)象，被markRaw()過(guò)則為true 
  [ReactiveFlags.IS_REACTIVE]?: boolean //是否被reactive代理過(guò) 
  [ReactiveFlags.IS_READONLY]?: boolean //是否被readonly代理過(guò) 
  [ReactiveFlags.RAW]?: any //被代理的原對(duì)象 const p = reactive(obj); p[ReactiveFlags.RAW] === obj 為true 
} 
function targetTypeMap(rawType: string) { 
  switch (rawType) { 
    case 'Object': 
    case 'Array': 
      return TargetType.COMMON // 普通引用類型 
    case 'Map': 
    case 'Set': 
    case 'WeakMap': 
    case 'WeakSet': 
      return TargetType.COLLECTION // 集合引用類型 
    default: 
      return TargetType.INVALID // invalid不可被代理的基本數(shù)據(jù)類型 int boolean string 
  } 
} 
 
// 運(yùn)用ts函數(shù)重載機(jī)制讓reactive有2種不同類型的入?yún)?、返?nbsp;
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T> 
export function reactive(target: object) { 
  // if trying to observe a readonly proxy, return the readonly version. 
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) { 
    return target 
  } 
  return createReactiveObject( 
    target, 
    false, // isReadonly 
    mutableHandlers,  // 用于Object Array 類型創(chuàng)建Proxy 
    mutableCollectionHandlers // 用于Set Map WeakSet WeakMap 類型創(chuàng)建Proxy 
  ) 
} 
// 創(chuàng)建響應(yīng)式代理對(duì)象 
function createReactiveObject( 
  target: Target, 
  isReadonly: boolean, 
  baseHandlers: ProxyHandler<any>, 
  collectionHandlers: ProxyHandler<any> 
) { 
  // target已經(jīng)被代理過(guò)，并且不是為了將響應(yīng)式對(duì)象變?yōu)橹蛔x則直接返回 
  if ( 
    target[ReactiveFlags.RAW] && 
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) 
  ) { 
    return target 
  } 
  // 從緩存(readonlyMap,reactiveMap)中查找，如果已經(jīng)被代理過(guò)則直接返回 
  const proxyMap = isReadonly ? readonlyMap : reactiveMap 
  const existingProxy = proxyMap.get(target) 
  if (existingProxy) { 
    return existingProxy 
  } 
  // 只有非基本類型類能被響應(yīng)式 
  const targetType = getTargetType(target) 
  if (targetType === TargetType.INVALID) { // 是否是基本類型 
    return target 
  } 
  const proxy = new Proxy( 
    target, 
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers 
  ) 
  proxyMap.set(target, proxy) // 緩存新代理后的對(duì)象 
  return proxy 
} 

packages/reactivity/src/baseHandles.ts

// mutableHandlers是Proxy的代理配置，const r = new Proxy(obj,mutableHandlers) 
export const mutableHandlers: ProxyHandler<object> = { 
  get: createGetter, 
  set: createSetter, 
  deleteProperty, 
  has, 
  ownKeys 
} 
function createGetter(isReadonly = false, shallow = false) { 
  return function get(target: Target, key: string | symbol, receiver: object) { 
    if (key === ReactiveFlags.IS_REACTIVE) { 
      return !isReadonly 
    } else if (key === ReactiveFlags.IS_READONLY) { 
      return isReadonly 
    } else if ( 
      key === ReactiveFlags.RAW && 
      receiver === (isReadonly ? readonlyMap : reactiveMap).get(target) 
    ) { 
      // 如果key是'__v_raw未被代理標(biāo)記屬性'且target已被響應(yīng)式代理過(guò)，則直接返回該代理的原對(duì)象 
      // 應(yīng)用場(chǎng)景 const originObj = toRaw(reactive(obj)); originObj === obj 為 true 
      return target 
    } 
    const targetIsArray = isArray(target) 
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) { 
      // 代理數(shù)組的 'includes', 'indexOf', 'lastIndexOf' 方法并觸發(fā)依賴收集 
      // 代理數(shù)組的 'push', 'pop', 'shift', 'unshift', 'splice' 并觸發(fā)依賴的副作用effect 
      return Reflect.get(arrayInstrumentations, key, receiver) 
    } 
    const res = Reflect.get(target, key, receiver) 
    if ( 
      isSymbol(key) 
        ? builtInSymbols.has(key as symbol) 
        : key === `__proto__` || key === `__v_isRef` 
    ) { 
      return res 
    } 
    if (!isReadonly) { 
      // 如果不是只讀代理觸發(fā)依賴收集 
      track(target, TrackOpTypes.GET, key) 
    } 
    // 如果是shallowReactive()直接返回結(jié)果，如果target[key]是引用類型則對(duì)該值進(jìn)行響應(yīng)式收集 
    // 這里充分說(shuō)明了vue3 reactive()的時(shí)候只代理了target的屬性這一層，只有當(dāng)訪問(wèn)target的某一個(gè)引用類型屬性時(shí)才向下繼續(xù)代理一層，而不是像vue2一樣在初始化的時(shí)候迭代代理所有引用類型 
    if (shallow) { 
      return res 
    } 
    if (isRef(res)) { 
      const shouldUnwrap = !targetIsArray || !isIntegerKey(key) 
      return shouldUnwrap ? res.value : res 
    } 
    if (isObject(res)) { 
      return isReadonly ? readonly(res) : reactive(res) 
    } 
    return res 
  } 
} 
function createSetter(shallow = false) { 
  return function set( 
    target: object, 
    key: string | symbol, 
    value: unknown, 
    receiver: object 
  ): boolean { 
    const oldValue = (target as any)[key] 
    if (!shallow) { 
      value = toRaw(value) 
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) { 
        // 如果不是數(shù)組，且舊值是ref類型，新值不是ref類型 
        oldValue.value = value 
        return true 
      } 
    } else { 
      // 如果是shallowReactive()返回的proxy，修改其屬性時(shí)不會(huì)觸發(fā)響應(yīng)式副作用effect 
    } 
    // 如果是對(duì)象返回true，如果是數(shù)組看是否是合法下標(biāo)或length indexOf push等自有屬性 
    const hadKey = 
      isArray(target) && isIntegerKey(key) 
        ? Number(key) < target.length 
        : hasOwn(target, key) 
    const result = Reflect.set(target, key, value, receiver) 
    // don't trigger if target is something up in the prototype chain of original 
    if (target === toRaw(receiver)) { 
      if (!hadKey) { 
        // 觸發(fā)該屬性的副作用effect，且類型為新增屬性 
        trigger(target, TriggerOpTypes.ADD, key, value) 
      } else if (hasChanged(value, oldValue)) { 
        // 觸發(fā)該屬性的副作用effect，且類型為修改屬性 
        trigger(target, TriggerOpTypes.SET, key, value, oldValue) 
      } 
    } 
    return result 
  } 
} 
// 代理target的deleteProperty方法，在刪除成功后觸發(fā)依賴的副作用effect 
function deleteProperty(target: object, key: string | symbol): boolean { 
  const hadKey = hasOwn(target, key) 
  const oldValue = (target as any)[key] 
  const result = Reflect.deleteProperty(target, key) 
  if (result && hadKey) { // 如果屬性存在并刪除成功，觸發(fā)依賴該屬性的副作用effect 
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue) 
  } 
  return result 
} 
// 代理target的has方法，觸發(fā)該屬性的依賴收集 
function has(target: object, key: string | symbol): boolean { 
  const result = Reflect.has(target, key) 
  if (!isSymbol(key) || !builtInSymbols.has(key)) {  
    // 如果不是symbol類型則觸發(fā)對(duì)該屬性依賴的收集 
    track(target, TrackOpTypes.HAS, key) 
  } 
  return result 
} 
// 代理target的ownKeys方法，觸發(fā)該屬性的依賴收集 
function ownKeys(target: object): (string | number | symbol)[] { 
  // 觸發(fā)對(duì)該屬性依賴的收集 
  track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)  
  return Reflect.ownKeys(target) 
} 

readonly

export function readonly<T extends object>( 
  target: T 
): DeepReadonly<UnwrapNestedRefs<T>> { 
  return createReactiveObject( 
    target, 
    true, // isReadonly 
    readonlyHandlers, // 用于Object Array 類型創(chuàng)建Proxy 
    readonlyCollectionHandlers // 用于Set Map WeakSet WeakMap 類型創(chuàng)建Proxy 
  ) 
} 
export const readonlyHandlers: ProxyHandler<object> = { 
  get: readonlyGet, // 與reactive 的 createGetter一樣，只是第一個(gè)參數(shù)為true 
  set(target, key) { 
    if (__DEV__) { 
      console.warn( 
        `Set operation on key "${String(key)}" failed: target is readonly.`, 
        target 
      ) 
    } 
    return true 
  }, 
  deleteProperty(target, key) { 
    if (__DEV__) { 
      console.warn( 
        `Delete operation on key "${String(key)}" failed: target is readonly.`, 
        target 
      ) 
    } 
    return true 
  } 
} 

ref

// 運(yùn)用ts函數(shù)重載機(jī)制讓ref有4種不同類型的入?yún)?、返?nbsp;
export function ref<T extends object>(value: T): ToRef<T> 
export function ref<T>(value: T): Ref<UnwrapRef<T>> 
export function ref<T = any>(): Ref<T | undefined> 
export function ref(value?: unknown) { 
  return createRef(value) 
} 
 
// ref底層不是通過(guò)proxy實(shí)現(xiàn)的，而是自定義類RefImpl 
function createRef(rawValue: unknown, shallow = false) { 
  if (isRef(rawValue)) { 
    return rawValue 
  } 
  return new RefImpl(rawValue, shallow) 
} 
 
// 將原始數(shù)據(jù)存儲(chǔ)在_value，攔截定義value屬性的get set方法實(shí)現(xiàn)依賴收集和修改更新響應(yīng) 
class RefImpl<T> { 
  private _value: T 
  public readonly __v_isRef = true 
  constructor(private _rawValue: T, public readonly _shallow = false) { 
    // 如果是淺響應(yīng)則無(wú)論是引用類型還是基礎(chǔ)類型都直接存儲(chǔ)原始數(shù)據(jù) 
    this._value = _shallow ? _rawValue : convert(_rawValue) // 注意covert在下面講解下 
  } 
  get value() { 
    // get觸發(fā)依賴收集，toRaw(this)是被ref(data)包裹的原始數(shù)據(jù)data 
    track(toRaw(this), TrackOpTypes.GET, 'value') 
    return this._value 
  } 
  set value(newVal) { 
    // 如果新舊值沒(méi)有變化則不處理 
    if (hasChanged(toRaw(newVal), this._rawValue)) { 
      this._rawValue = newVal 
      this._value = this._shallow ? newVal : convert(newVal) 
      // trigger 觸發(fā)依賴此屬性的effect重新執(zhí)行，toRaw(this)是被ref(data)包裹的原始數(shù)據(jù)data 
      trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal) 
    } 
  } 
} 
 
// 如果被const r = ref(data)包裹的原始數(shù)據(jù)data是引用類型，則對(duì)引用類型進(jìn)行響應(yīng)式處理，否則直接返回基本類型。 
// 為什么要這樣處理呢?  
// 因?yàn)槿绻贿@樣做的話，r.value的變化會(huì)被get set攔截處理，但是r.value.xxx無(wú)法被攔截失去了響應(yīng) 
const convert = <T extends unknown>(val: T): T => isObject(val) ? reactive(val) : val 

// 將reactive數(shù)據(jù)和ref數(shù)據(jù)的行為統(tǒng)一成reactive行為 
// 主要用于template中html標(biāo)簽屬性綁定時(shí)不需要寫r.value, 直接寫r即可 
// 讓ref類型的數(shù)據(jù)具有reactive類型的行為（不需要通過(guò)r.value.xxx訪問(wèn)，直接r.xxx） 
export function proxyRefs<T extends object>( 
  objectWithRefs: T 
): ShallowUnwrapRef<T> { 
  return isReactive(objectWithRefs) 
    ? objectWithRefs 
    : new Proxy(objectWithRefs, shallowUnwrapHandlers) 
} 
const shallowUnwrapHandlers: ProxyHandler<any> = { 
  get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)), 
  set: (target, key, value, receiver) => { 
    const oldValue = target[key] 
    if (isRef(oldValue) && !isRef(value)) { 
      oldValue.value = value 
      return true 
    } else { 
      return Reflect.set(target, key, value, receiver) 
    } 
  }, 
} 
export function unref<T>(ref: T): T extends Ref<infer V> ? V : T { 
  return isRef(ref) ? (ref.value as any) : ref 
} 
 
// 將reactive對(duì)象的某個(gè)屬性變成ref類型 
// const r = toRef(reactive({}),'attr') 
export function toRef<T extends object, K extends keyof T>( 
  object: T, 
  key: K 
): ToRef<T[K]> { 
  return isRef(object[key]) 
    ? object[key] 
    : (new ObjectRefImpl(object, key) as any) 
} 
class ObjectRefImpl<T extends object, K extends keyof T> { 
  public readonly __v_isRef = true 
  constructor(private readonly _object: T, private readonly _key: K) {} 
  get value() { 
    return this._object[this._key] 
  } 
  set value(newVal) { 
    this._object[this._key] = newVal 
  } 
} 
// 將reactive對(duì)象的所有屬性變成ref類型 
// const obj = toRefs(reactive({})) 
export function toRefs<T extends object>(object: T): ToRefs<T> { 
  if (__DEV__ && !isProxy(object)) { 
    console.warn(`toRefs() expects a reactive object but received a plain one.`) 
  } 
  const ret: any = isArray(object) ? new Array(object.length) : {} 
  for (const key in object) { 
    ret[key] = toRef(object, key) 
  } 
  return ret 
} 

effect

• effect的源碼非常具有跳躍性，需要多看上面的響應(yīng)式原理架構(gòu)圖才能理解
• watch\computed\render的時(shí)候都會(huì)創(chuàng)建effect，所以入口來(lái)源復(fù)雜，入?yún)⒁矎?fù)雜
• reactive\ref\computed\watch\render\update訪問(wèn)都會(huì)級(jí)聯(lián)觸發(fā)該屬性依賴收集track
• reactive\ref\computed修改都會(huì)級(jí)聯(lián)觸發(fā)trigger執(zhí)行該屬性的副作用
• effectStack 是當(dāng)前待執(zhí)行的effect棧
• activeEffect 是全局正在觸發(fā)的effect，每當(dāng)一個(gè)effect觸發(fā)新的effect入棧的時(shí)候activeEffect都會(huì)更新為新的，執(zhí)行完畢后又從effectStack pop出前一個(gè)
• 當(dāng)調(diào)用watch(getter,scheduler,{onTrack,onTrigger})時(shí)，可以簡(jiǎn)單的理解為觸發(fā)

effect(getter, { 
  lazy: true, // 非computed 
  onTrack, 
  onTrigger, 
  scheduler 
}) 

export function effect<T = any>( 
  fn: () => T, 
  options: ReactiveEffectOptions = EMPTY_OBJ 
): ReactiveEffect<T> { 
  if (isEffect(fn)) { 
    fn = fn.raw 
  } 
  const effect = createReactiveEffect(fn, options) 
  if (!options.lazy) { // computed屬性懶執(zhí)行，其他副作用執(zhí)行觸發(fā)依賴收集 
    effect() 
  } 
  return effect 
} 
function createReactiveEffect<T = any>( 
  fn: () => T, 
  options: ReactiveEffectOptions 
): ReactiveEffect<T> { 
  const effect = function reactiveEffect(): unknown { 
    if (!effect.active) { 
      return options.scheduler ? undefined : fn() 
    } 
    // effectStack 是當(dāng)前有效的待執(zhí)行effect棧 
    if (!effectStack.includes(effect)) { 
      cleanup(effect) // 可能有多個(gè)響應(yīng)式屬性都會(huì)觸發(fā)該effect，但是該effect只會(huì)執(zhí)行一次不會(huì)重復(fù)執(zhí)行，所以從所有依賴屬性的副作用數(shù)組中刪除該effect 
      try { 
        enableTracking() // 只有副作用原函數(shù)fn()執(zhí)行期間收集其依賴的響應(yīng)式屬性，執(zhí)行完畢后不能再收集 
        effectStack.push(effect) 
        activeEffect = effect // 當(dāng)前副作用為全局正在執(zhí)行的副作用 
        return fn() 
      } finally { 
        // 當(dāng)前副作用依賴收集完成后退棧并不再觸發(fā)依賴收集 
        effectStack.pop()  
        resetTracking() 
        activeEffect = effectStack[effectStack.length - 1] 
      } 
    } 
  } as ReactiveEffect 
  effect.id = uid++ 
  effect.allowRecurse = !!options.allowRecurse 
  effect._isEffect = true 
  effect.active = true 
  effect.raw = fn // 存儲(chǔ)原始副作用函數(shù) 
  effect.deps = [] // 該副作用依賴的所有響應(yīng)式屬性 
  effect.options = options 
  return effect 
} 
// 可能有多個(gè)響應(yīng)式屬性都會(huì)觸發(fā)該effect，但是該effect只會(huì)執(zhí)行一次不會(huì)重復(fù)執(zhí)行，所以從所有依賴屬性的副作用數(shù)組中刪除該effect 
function cleanup(effect: ReactiveEffect) { 
  const { deps } = effect 
  if (deps.length) { 
    for (let i = 0; i < deps.length; i++) { 
      deps[i].delete(effect) 
    } 
    deps.length = 0 
  } 
} 

export const enum TrackOpTypes { 
  GET = 'get', 
  HAS = 'has', 
  ITERATE = 'iterate' 
} 
export const enum TriggerOpTypes { 
  SET = 'set', 
  ADD = 'add', 
  DELETE = 'delete', 
  CLEAR = 'clear' 
} 
// 依賴收集副作用函數(shù) 
export function track(target: object, type: TrackOpTypes, key: unknown) { 
  if (!shouldTrack || activeEffect === undefined) { 
    return 
  } 
  let depsMap = targetMap.get(target) // targetMap存儲(chǔ)所有的proxy代理原target 
  if (!depsMap) { 
    targetMap.set(target, (depsMap = new Map())) 
  } 
  let dep = depsMap.get(key) // depsMap存儲(chǔ)某個(gè)proxy代理原target里的所有屬性 
  if (!dep) { 
    depsMap.set(key, (dep = new Set())) // dep存儲(chǔ)某個(gè)proxy代理原target里的某個(gè)屬性的所有副作用effect 
  } 
  if (!dep.has(activeEffect)) { 
    dep.add(activeEffect) 
    activeEffect.deps.push(dep) 
    if (__DEV__ && activeEffect.options.onTrack) { 
      // watch(key,()=>{},{onTrack}) 里的onTrack觸發(fā)此處 
      // watchEffect(()=>{},{onTrack}) 里的onTrack觸發(fā)此處 
      activeEffect.options.onTrack({ 
        effect: activeEffect, 
        target, 
        type, 
        key 
      }) 
    } 
  } 
} 
// 依賴副作用觸發(fā)函數(shù) 
export function trigger( 
  target: object, 
  type: TriggerOpTypes, 
  key?: unknown, 
  newValue?: unknown, 
  oldValue?: unknown, 
  oldTarget?: Map<unknown, unknown> | Set<unknown> 
) { 
  const depsMap = targetMap.get(target) 
  if (!depsMap) { 
    return 
  } 
  const effects = new Set<ReactiveEffect>() // 存儲(chǔ)本次操作導(dǎo)致的需要執(zhí)行的副作用集合 
  const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => { 
    if (effectsToAdd) { 
      effectsToAdd.forEach(effect => { 
        if (effect !== activeEffect || effect.allowRecurse) { 
          effects.add(effect) 
        } 
      }) 
    } 
  } 
 
  if (type === TriggerOpTypes.CLEAR) { 
    // 對(duì)某個(gè)數(shù)組或集合執(zhí)行清空操作時(shí)，該數(shù)組的所有副作用都要添加到待執(zhí)行數(shù)組中 
    depsMap.forEach(add) 
  } else if (key === 'length' && isArray(target)) { 
    // 當(dāng)訪問(wèn)數(shù)組length屬性時(shí)只添加其相關(guān)的副作用到待執(zhí)行數(shù)組中 
    depsMap.forEach((dep, key) => { 
      if (key === 'length' || key >= (newValue as number)) { 
        add(dep) 
      } 
    }) 
  } else { 
    // schedule runs for SET | ADD | DELETE 
    if (key !== void 0) { // void 0 === undefined 
      add(depsMap.get(key)) 
    } 
 
    // also run for iteration key on ADD | DELETE | Map.SET 
    switch (type) { 
      case TriggerOpTypes.ADD: 
        if (!isArray(target)) { 
          add(depsMap.get(ITERATE_KEY)) 
          if (isMap(target)) { 
            add(depsMap.get(MAP_KEY_ITERATE_KEY)) 
          } 
        } else if (isIntegerKey(key)) { 
          // new index added to array -> length changes 
          add(depsMap.get('length')) 
        } 
        break 
      case TriggerOpTypes.DELETE: 
        if (!isArray(target)) { 
          add(depsMap.get(ITERATE_KEY)) 
          if (isMap(target)) { 
            add(depsMap.get(MAP_KEY_ITERATE_KEY)) 
          } 
        } 
        break 
      case TriggerOpTypes.SET: 
        if (isMap(target)) { 
          add(depsMap.get(ITERATE_KEY)) 
        } 
        break 
    } 
  } 
  // 創(chuàng)建執(zhí)行副作用的函數(shù) 
  const run = (effect: ReactiveEffect) => { 
    if (__DEV__ && effect.options.onTrigger) { 
      effect.options.onTrigger({ 
        effect, 
        target, 
        key, 
        type, 
        newValue, 
        oldValue, 
        oldTarget 
      }) 
    } 
    if (effect.options.scheduler) { 
      // scheduler 可以簡(jiǎn)單理解為watch(key,cb)的cb 
      effect.options.scheduler(effect) 
    } else { 
      effect() 
    } 
  } 
  effects.forEach(run) 
} 

computed

// 運(yùn)用ts函數(shù)重載機(jī)制讓ref有3種不同類型的入?yún)ⅰ⒎祷?nbsp;
export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T> 
export function computed<T>( 
  options: WritableComputedOptions<T> 
): WritableComputedRef<T> 
export function computed<T>( 
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T> 
) { 
  let getter: ComputedGetter<T> 
  let setter: ComputedSetter<T> 
  if (isFunction(getterOrOptions)) { 
    getter = getterOrOptions 
    setter = __DEV__ 
      ? () => { 
          console.warn('Write operation failed: computed value is readonly') 
        } 
      : NOOP 
  } else { 
    getter = getterOrOptions.get 
    setter = getterOrOptions.set 
  } 
  return new ComputedRefImpl( 
    getter, 
    setter, 
    isFunction(getterOrOptions) || !getterOrOptions.set // isReadonly 
  ) as any 
} 
class ComputedRefImpl<T> { 
  private _value!: T // 當(dāng)前計(jì)算屬性返回值 
  private _dirty = true // 是否有依賴屬性變化導(dǎo)致需要重新求值 
  public readonly effect: ReactiveEffect<T> 
  public readonly __v_isRef = true; 
  public readonly [ReactiveFlags.IS_READONLY]: boolean //是否只讀 
  constructor( 
    getter: ComputedGetter<T>, 
    private readonly _setter: ComputedSetter<T>, 
    isReadonly: boolean 
  ) { 
    this.effect = effect(getter, { 
      lazy: true, // 初始化時(shí)不求值，觸發(fā)get的時(shí)候才求值 
      scheduler: () => { 
        if (!this._dirty) {  
          // 依賴屬性發(fā)生變化，當(dāng)前計(jì)算屬性變臟了，在下次get訪問(wèn)時(shí)需要重新求值；觸發(fā)依賴該計(jì)算屬性的副作用執(zhí)行 
          this._dirty = true 
          trigger(toRaw(this), TriggerOpTypes.SET, 'value') 
        } 
      } 
    }) 
    this[ReactiveFlags.IS_READONLY] = isReadonly 
  } 
  get value() { 
    if (this._dirty) { 
      // 第一次訪問(wèn)或依賴屬性發(fā)生變化才重新求值 
      this._value = this.effect() 
      this._dirty = false 
    } 
    track(toRaw(this), TrackOpTypes.GET, 'value') 
    return this._value 
  } 
  set value(newValue: T) { 
    this._setter(newValue) 
  } 
}