Vue3のレスポンシブ原則の詳細な説明

// 1. オブジェクトの応答性: 各キーを走査し、ゲッターとセッターを定義する
// 2. 配列の応答性: 配列のプロトタイプメソッドをオーバーライドし、追加の通知ロジックを追加します。const originalProto = Array.prototype
const arrayProto = Object.create(originalProto)
  ;['push'、'pop'、'shift'、'unshift'、'splice'、'reverse'、'sort'].forEach(
    メソッド => {
      arrayProto[メソッド] = 関数 () {
        originalProto[メソッド].apply(this, 引数)
        通知更新()
      }
    }
  ）
関数 observe(obj) {
  if (typeof obj !== 'object' || obj == null) {
    戻る
  }
  // 配列型の判定を追加し、配列の場合はそのプロトタイプを上書きします if (Array.isArray(obj)) {
    Object.setPrototypeOf(obj, 配列Proto)
  } それ以外 {
    定数キー = Object.keys(obj)
    (i = 0 とします; i < keys.length; i++) {
      定数キー = キー[i]
      defineReactive(obj, キー, obj[キー])
    }
  }
}
関数defineReactive（オブジェクト、キー、値）{
  observe(val) // ネストされたオブジェクトの問題を解く Object.defineProperty(obj, key, {
    得る （） {
      戻り値
    },
    設定(新しい値) {
      (newVal !== val) の場合 {
        observe(newVal) // 新しい値はオブジェクトです val = newVal
        通知更新()
      }
    }
  })
}
関数notifyUpdate(){
  console.log('ページが更新されました!')
}

関数リアクティブ(obj) {
  if (typeof obj !== 'object' && obj != null) {
    オブジェクトを返す
  }
  // プロキシはオブジェクトの外側のレイヤーにインターセプションを追加することと同じです // http://es6.ruanyifeng.com/#docs/proxy
  const 観察 = 新しいプロキシ(obj, {
    get (ターゲット、キー、受信者) {
      // Reflect は、より標準化され、使いやすい、オブジェクトに対するデフォルトの操作を実行するために使用されます。 // Proxy メソッドと Object メソッドには、対応する Reflect メソッドがあります。 // http://es6.ruanyifeng.com/#docs/reflect
      const res = Reflect.get(ターゲット、キー、レシーバー)
      console.log(`${key}:${res} を取得`)
      戻り値
    },
    (ターゲット、キー、値、受信者) を設定します {
      const res = Reflect.set(ターゲット、キー、値、レシーバー)
      console.log(`${key}:${value} を設定`)
      戻り値
    },
    deleteProperty (ターゲット、キー) {
      const res = Reflect.deleteProperty(ターゲット、キー)
      console.log(`${key}:${res} を削除`)
      戻り値
    }
  })
  復帰が観察された
}
//コードテスト const state = reactive({
  foo: 'foo',
  バー: { a: 1 }
})
// 1. state.foo を取得する // ok
// 2. 既存の属性を設定する state.foo = 'fooooooo' // ok
// 3. 存在しない属性を設定する state.dong = 'dong' // ok
// 4. 属性を削除する delete state.dong // ok

// ネストされたオブジェクトのプロパティを設定する react.bar.a = 10 // no ok

      // ヘルパーメソッドを抽出 const isObject = val => val !== null && typeof val === 'object'
      関数リアクティブ(obj) {
        //オブジェクトかどうかを判定する if (!isObject(obj)) {
          オブジェクトを返す
        }
        const 観測 = 新しいプロキシ(obj, {
          get (ターゲット、キー、受信者) {
            // ...
            // オブジェクトの場合は再帰が必要です return isObject(res) ? reactive(res) : res
          },
          //...
        }

const toProxy = new WeakMap() // obj:observedと同じ
      const toRaw = new WeakMap() // 観測されたものと同じ:obj
      関数リアクティブ(obj) {
        //...
        // 重複プロキシを避けるためにキャッシュを検索する if (toProxy.has(obj)) {
          Proxy.get(obj) に戻ります
        }
        toRaw.has(obj) の場合 {
          オブジェクトを返す
        }
        const 観察 = 新しい Proxy(...)
        // プロキシの結果をキャッシュする toProxy.set(obj, observe)
        toRaw.set(観測値、オブジェクト)
        復帰が観察された
      }
      // テスト効果 console.log(reactive(data) === state)
      console.log(リアクティブ(状態) === 状態)