Vue3 Reactivityの実装方法を教えます

'@nx-js/observer-util' から { observable, observe } をインポートします。

const カウンター = observable({ num: 0 });
const countLogger = observe(() => console.log(counter.num));

// countLoggerを呼び出して1をログに記録します
カウンター.num++;

// リスナーを追加 xxx.addEventListener('counter.num', () => console.log(counter.num))
// コンテンツを変更する counter.num++
//通知を送信xxx.emit('counter.num', counter.num)

registerRunningReactionForOperation({ ターゲット、キー、レシーバー、タイプ: 'get' })
const connectionStore = 新しい WeakMap()
// 反応は互いに呼び出して呼び出しスタックを形成できます
定数反応スタック = []

// 現在実行中の反応を登録し、obj.key の変更時に再度キューに入れます
エクスポート関数 registerRunningReactionForOperation (操作) {
  // スタックの上から現在の反応を取得します
  const runningReaction = 反応スタック[反応スタックの長さ - 1]
  if (実行中の反応) {
    デバッグ操作(実行中の反応、操作)
    オペレーションの反応を登録します(実行中の反応、操作)
  }
}

エクスポート関数 registerReactionForOperation (反応、{ターゲット、キー、タイプ}) {
  if (type === 'iterate') {
    キー = ITERATION_KEY
  }

  const 反応ForObj = connectionStore.get(ターゲット)
  反応ForKey = 反応ForObj.get(キー) とします。
  if (!reactionsForKey) {
    反応ForKey = 新しいSet()
    反応オブジェクトを設定します(キー、反応キー)
  }
  // キーが現在の実行中に反応によって使用されているという事実を保存します
  if (!reactionsForKey.has(reaction)) {
    反応ForKey.add(反応)
    反応クリーナーをプッシュします(反応キー)
  }
}

接続ストア<弱いマップ>: {
    // ターゲット例: {num: 1}
    ターゲット: <マップ>{
        数値: (反応1、反応2...)
    }
}

エクスポート関数 observe (fn, options = {}) {
  // 渡された関数がまだ反応でない場合は、それを反応でラップします
  定数反応 = fn[IS_REACTION]
    ? 関数
    : 関数反応() {
      runAsReaction(反応、fn、this、引数) を返します。
    }
  // スケジューラとデバッガを反応時に保存する
  反応.スケジューラ = オプション.スケジューラ
  反応.デバッガー = オプション.デバッガー
  // これが反応であるという事実を保存する
  反応[IS_REACTION] = true
  // 遅延反応でない場合は、反応を 1 回実行します
  if (!options.lazy) {
    反応（）
  }
  反応を返す
}

関数 runAsReaction (反応、関数、コンテキスト、引数) をエクスポートします。
  // 反応が観察されていない場合は、反応関係を構築しない
  （反応が観察されない場合）{
    Reflect.apply(fn, context, args) を返す
  }

  // 反応スタックにまだ存在しない場合にのみ反応を実行します
  // TODO: 明示的に再帰的な反応を許可するように改善する
  （反応スタックのインデックス（反応）が -1 の場合）
    // (オブジェクト -> キー -> 反応) 接続を解放します
    // クリーナー接続をリセットします
    releaseReaction(反応)

    試す {
      // 反応を現在実行中のものとして設定します
      // これは、get トラップで (observable.prop -> reaction) ペアを作成するために必要です
      反応スタック.push(反応)
      Reflect.apply(fn, context, args) を返す
    ついに
      // 実行を停止するときに、常に現在実行中のフラグを反応から削除します
      反応スタック.ポップ()
    }
  }
}

//tryの内容を実行します。
// return がある場合、戻り内容は実行されますが、戻りません。finally を実行した後に戻り、ここでブロックされることはありません。

関数テスト() {
    試す { 
        コンソールログ(1); 
        const s = () => { console.log(2); 戻り値 4; }; 
        s() を返します。
    ついに 
        コンソール.log(3) 
    }
}

// 1 2 3 4
コンソールログ(テスト())

関数createObserve(obj) {
    
    ハンドラを = {
        get: 関数 (ターゲット、キー、レシーバー) {
            結果 = Reflect.get(ターゲット、キー、レシーバー)
            トラック(ターゲット、キー、受信者)            
            結果を返す
        },
        設定: 関数 (ターゲット、キー、値、レシーバー) {
            result = Reflect.set(ターゲット、キー、値、レシーバー) とします。
            トリガー(ターゲット、キー、値、レシーバー)        
            結果を返す
        }
    }

    proxyObj = new Proxy(obj, handler) とします。

    proxyObj を返す
}

関数 observable(obj) {
    createObserve(obj) を返す
}

定数ターゲットマップ = 新しい WeakMap()
アクティブエフェクトスタックを [] にします
アクティブエフェクトを有効にする

関数 track(ターゲット、キー、レシーバー?) {
    depMap = targetMap.get(target) とします。

    場合 (!depMap) {
        targetMap.set(target, (depMap = new Map()))
    }

    dep = depMap.get(キー) とします。

    場合 (!dep) {
        depMap.set(キー、(dep = new Set()))
    }

    （！dep.has(activeEffect)）の場合{
        dep.add(アクティブエフェクト)
    }
}

ターゲットマップ = {
    <プロキシまたはオブジェクト> 観測可能: <マップ>{
        <観測可能なキー> キー: ( 観測、観測、観測... )
    }
}

関数トリガー(ターゲット、キー、値、レシーバー?) {
    depMap = targetMap.get(target) とします。

    場合 (!depMap) {
        戻る
    }

    dep = depMap.get(キー) とします。

    場合 (!dep) {
        戻る
    }

    dep.forEach((item) => item && item())
}

関数 observe(fn:Function) {
    定数 wrapFn = () => {

        定数反応 = () => {
            試す {
                アクティブエフェクト = fn     
                アクティブエフェクトスタック.push(fn)
                fn() を返す
            ついに
                アクティブエフェクトスタック.pop()
                アクティブエフェクト = アクティブエフェクトスタック[アクティブエフェクトスタックの長さ - 1]
            }
        }

        反応を返す()
    }

    wrapFn()

    wrapFnを返す
}

p = observable({num: 0}) とします。
j = observe(() => {console.log("私は観察しています:", p.num);)
e = observe(() => {console.log("i am observe2:", p.num)}) とします。

// 私は観察しています: 1
// 私は観察2です: 1
p.num++

クラス computedImpl {
    プライベート_値
    プライベート_setter
    私的効果

    コンストラクタ(オプション) {
        this._value = 未定義
        this._setter = 未定義
        const { get, set } = オプション
        this._setter = 設定

        this.effect = 観察(() => {
            this._value = get()
        })
    }

    値を取得する() {
        this._value を返す
    }

    値を設定する (val) {
        this._setter && this._setter(val)
    }
}

関数計算(fnOrOptions) {

    オプション = {
        取得: null、
        設定: null
    }

    if (fnOrOptions 関数のインスタンス) {
        オプション.get = fnOrOptions
    } それ以外 {
        const { 取得、設定 } = fnOrOptions
        options.get = 取得
        オプション.set = 設定
    }

    新しいcomputedImpl(options)を返す
}

p = observable({num: 0}) とします。
j = observe(() => {console.log("私は観察しています:", p.num); return `私は観察しています: ${p.num}`})
e = observe(() => {console.log("i am observe2:", p.num)}) とします。
let w = computed(() => { return 'I am computed 1:' + p.num })
v = 計算された({
    取得: () => {
        'テスト計算ゲッター' + p.num を返す
    },

    設定: (値) => {
        p.num = `計算されたセッター${val}をテストする`
    }
})

p.num++
// 私は観察しています: 0
// 私は観察2: 0
// 私は観察しています: 1
// 私は観察2です: 1
// 1:1で計算されます
console.log(w.値)
v.値 = 3000
console.log(w.値)
// 私は観察しています: テスト計算された setter3000
// 私は observe2: テスト計算された setter3000 です
// 計算済み 1:テスト計算済み setter3000
w.値 = 1000
// w にはセッターが設定されていないので効果がありません // 計算済みです 1:test computed setter3000
console.log(w.値)