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

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

Vue2 レスポンシブ原則のレビュー

// 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('ページが更新されました!')
}

vue2 の応答性の欠点:
応答性プロセスには再帰的なトラバーサルが必要であり、大量のリソースを消費します。新しく追加または削除された属性は監視できません。配列の応答性には追加の実装が必要です。
マップ、セット、クラスなどはレスポンシブに変更できず、構文も制限されています。

Vue3 レスポンシブ原則の分析

Vue3 はこれらの問題を解決するために ES6 の Proxy 機能を使用します。

関数リアクティブ(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
          },
          //...
        }

重複エージェントを避ける

繰り返し使用する薬剤、例えば

reactive(data) // プロキシされた純粋なオブジェクト
reactive(react) // プロキシオブジェクト

解決策: 以前のプロキシ結果をキャッシュし、取得時に直接使用します。

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(リアクティブ(状態) === 状態)

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueにおけるv-modelと応答性の実装原理の分析
  • Vue の応答性原則の詳細な例
  • Vue3.0 レスポンシブ機能の原理の詳細
  • Vueのレスポンシブシステムの原理の詳細な説明
  • VUE 応答性原理の詳細な説明
  • VUE レスポンシブ原則の実装の詳細な説明

<<:  Linux環境でrmによって誤って削除されたファイルを回復する方法

>>:  表内のコンテンツオーバーフローのレイアウト方法について

推薦する

Tomcatでcatalina.batがUTF-8に設定されている場合、コンソールに文字化けした文字が表示されます

1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...

ウェブデザイナー職の面接でよくある質問と回答

1. ASP.NET Web アプリケーションのテンプレートとは何ですか? それらの違いは何ですか?...

Videojs+swiper が Taobao の商品詳細カルーセルを実現

この記事では、Taobao商品詳細のカルーセルを実現するためのvideojs+swiperの具体的な...

MySQL データベースのインデックスとトランザクション

目次1. 索引1.1 コンセプト1.2 機能1.3 索引作成の原則1.3.1 ディスクアクセス回数を...

4つのファイル拡張子 .html、.htm、.shtml、.shtm の違い

ウェブページを作り始めたばかりの友人の多くは、拡張子が非常に多いことに気づきます。実際、htm と ...

WindowsでMysql5.7.17のインストールと起動に失敗する問題を解決する

マシンに初めて MySQL をインストールします。オペレーティングシステムはwin7ですmysqlの...

Nginx サーバーが Systemd カスタム サービス プロセス分析を追加

1. nginxを例に挙げるyumコマンドを使用してNginxをインストールしましたSystemd ...

CSS 属性値正規マッチングセレクターの使い方 (ヒント)

属性値の正規一致セレクターには 3 つの種類があります。 [属性^="値"] [...

JS ベースの Ajax 同時リクエスト制御を実装する方法

目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...

WeChatミニプログラムの基本チュートリアル:Echartの使用

序文まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。まずEChartsの公式サイ...

div+cssとウェブ標準ページの利点

div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...

MySQL の innodb_flush_log_at_trx_commit と sync_binlog を区別する方法

2 つのパラメータ innodb_flush_log_at_trx_commit と sync_bi...

Angularデータバインディングとその実装の詳細な説明

目次序文データバインディングとは何ですか? Angular のデータバインディングの種類一方向データ...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

フロントエンドJavaScriptのクラス

目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...