日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

interface ReactiveEffect {
 (): any
 isEffect: true
 active: boolean
 raw: Function // 具體執(zhí)行的函數(shù)
 deps: Array
 computed?: boolean
 scheduler?: (run: Function) => void
 onTrack?: (event: DebuggerEvent) => void
 onTrigger?: (event: DebuggerEvent) => void
 onStop?: () => void
}

export type Dep = Set
export type KeyToDepMap = Map
export const targetMap: WeakMap = new WeakMap()

// Proxy get 簡化
function get(target: any, key: string | symbol, receiver: any) {
 // 通過key拿到原始值res
 const res = Reflect.get(target, key, receiver)
 // 過濾不需要代理的情況
 // ...
 // 依賴收集
 track(target, OperationTypes.GET, key)
 // 如果取到的值是個對象，將對象再代理包裝一下
 // Proxy只能代理對象第一層級
 return isObject(res) ? reactive(res) : res
}

// Proxy set 簡化
function set(
 target: any,
 key: string | symbol,
 value: any,
 receiver: any
): boolean {
 // 一些不需要代理設(shè)置的場景
 // ...

 // 設(shè)置原始對象的值
 const result = Reflect.set(target, key, value, receiver)
 // 避免重復(fù)trigger的邏輯
 // ...
 // 觸發(fā)通知更新
 trigger(target, '更新的類型, 新增key或更新key', key)
 return result
}

// 簡化的 track
function track(
 target: any,
 type: OperationTypes,
 key?: string | symbol
) {
 // 只有在依賴收集階段才進(jìn)行依賴收集
 // 除了render，其他場景也可能會觸發(fā)Proxy的get，但不需要進(jìn)行依賴收集
 // activeReactiveEffectStack棧頂包裝了當(dāng)前render的組件的mount和update的邏輯
 const effect = activeReactiveEffectStack[activeReactiveEffectStack.length - 1]
 // 如果effect為空，說明當(dāng)前不在render階段
 if (effect) {
  // ...
  // =====>初始化對應(yīng){target -> key -> dep}的結(jié)構(gòu)
  let depsMap = targetMap.get(target)
  if (depsMap === void 0) {
   targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key as string | symbol)
  if (!dep) {
   depsMap.set(key as string | symbol, (dep = new Set()))
  }
  // <=====初始化對應(yīng){target -> key -> dep}的結(jié)構(gòu)
  // 依賴列表里如果沒有，add
  if (!dep.has(effect)) {
   // 這里將effect作為依賴，緩存到依賴列表
   dep.add(effect)
   effect.deps.push(dep)
  }
 }
}

// 簡化的trigger
function trigger(
 target: any,
 type: OperationTypes,
 key?: string | symbol,
 extraInfo?: any
) {
 // 獲取對應(yīng)target在track過程中緩存的依賴
 const depsMap = targetMap.get(target)

 const effects: Set = new Set()
 // 省略分類邏輯
 depsMap.forEach(dep => {
  // 將effect分類過濾添加到effects
 })
 
 const run = (effect: ReactiveEffect) => {
  // 有個異步調(diào)度的過程，nextTick
  scheduleRun(effect, target, type, key, extraInfo)
 }

 effects.forEach(run)
}