1. proxy と Object.defineProperty の利点プロキシの利点:
Object.definePropertyの利点: 互換性良好: IE9 に対応していますが、Proxy にはブラウザ互換性の問題があり、ポリフィルで解消できないため、Vue の作者は、Proxy で書き直すには次のメジャーバージョン (3.0) まで待つ必要があると述べています。 2. プロキシ監視オブジェクトのシンプルな実装1. プロキシオブジェクトのシンプルな実装```javascript let data = {}; // 空のオブジェクトを定義します。let proxy = new Proxy(data, {}); // Proxy を作成し、データをターゲット オブジェクトとして使用します。// Proxy プロキシ オブジェクトの名前属性を変更します。proxy.name = 'shelley'; console.log(プロキシ); コンソール.log(データ) // { 名前: 'シェリー' } // { 名前: 'シェリー' } 「」 2. 補足知識の反映
ターゲット オブジェクトに割り当てるには、
3. プロキシ方式handler.set() メソッド属性は、操作のキャッチャーを設定します。 ```javascript データ = { 名前: 'シェリー', 年齢: '27' }; p = new Proxy(data, { set(ターゲット、プロパティ、値) { // target = ターゲット オブジェクト // prop = 設定されたプロパティ // value = 変更された値 console.log(target, prop, value); // { name: 'shelley', age: '27' } age 18 Reflect.set(...引数) を返します。 } }) ページ年齢 = 18; console.log(data); // { 名前: 'shelley'、年齢: 18 } 「」 - handler.get() 属性読み取り操作のキャプチャ。 ```javascript データ = { 名前: 'シェリー', 年齢: 22 }; p = new Proxy(data, { get(ターゲット、プロパティ){ console.log(target, prop); //{ name: 'shelley', age: 22 } 年齢 Reflect.get(...引数) を返します。 } }) console.log(ページ番号);//22 「」 Object.defineProperty 監視オブジェクトのシンプルな実装 ```javascript var o = {}; // 新しいオブジェクトを作成します var bValue = 39; // アクセサー記述子プロパティのインスタンスをオブジェクトに追加します Object.defineProperty(o, 'bValue', { // このコードは o のプロパティを設定せず、アクセスされたときにのみ get() を実行します { bValue を返します。 }, set(新しい値) { console.log('set==>', 新しい値); bValue = 新しい値; } }); コンソールログ(o) // {} // アクセサプロキシの bValue プロパティの get メソッドに入り、戻り、o オブジェクトの bValue の値を 38 に設定します。 console.log(o.bValue); // 38 // アクセサー プロキシの bValue プロパティの set メソッドに入り、bValue の新しい値を設定します。 // もう一度 get を入力して戻り、o オブジェクトの bValue の値を 40 に設定します。 o.b値 = 40; コンソール.log(o.bValue) // 40 「」 まとめ:
3. 手書きの vue3.0 双方向バインディング - es6 プロキシ1. プロキシとは何か
2. vue.jsで双方向バインディングを使用する```javascript <div id="アプリ"> <h2>{{メッセージ}}</h2> <input type="text" v-model="msg"/> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <スクリプト> vm = new Vue({ el: '#app', データ: { メッセージ: 'シェリー' }, }) </スクリプト> 「」 プロキシと Object.definePropertyVue 2.0 での双方向バインディング、双方向バインディングに Object.defineProperty() を使用する 欠点:
- Object.definePorperty() はすべてのオブジェクトのすべてのプロパティを再帰的に走査するため、データ階層が深い場合はパフォーマンスに影響します。 - Object.definePorperty() はオブジェクトに対してのみ使用でき、配列に対しては使用できません。 - Object.definePorperty() は定義中のプロパティのみを監視でき、新しく追加されたプロパティは監視できません。 - Object.definePorperty() は配列では使用できないため、vue2.0 では配列メソッドのプロトタイプを書き換えて配列データを監視することを選択しますが、それでも配列のインデックスと長さの変更を監視することはできません。 Vue 3.0 での双方向バインディング、双方向バインディングに Proxy と Reflect を使用する アドバンテージ:
欠点:
解決:
プロキシは1つのレイヤーしかプロキシできず、深く監視することはできない
これで、Vue3 データ双方向バインディングのプロキシ実装の原理に関するこの記事は終了です。Vue3 データ双方向バインディングのプロキシ実装に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu環境にAnaconda3をインストールするための完全な手順
>>: ブラウザ(IEシリーズ)を判別するための条件付きコメント
この記事では、例を使用して、replace と regexp を使用して MySQL で正規表現を置...
問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...
データベースはさておき、人生における方言とは何でしょうか?方言とは、ある場所特有の言語です。他の場所...
効果を直接確認するために、リロード、左を閉じる、右を閉じる、その他の機能を閉じるなどの右クリック メ...
問題を見つける最近、MySQL コマンドを使用して MySQL サーバーに接続したときに、以下のよう...
コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...
序文ファイル システムは、データの保存方法と復元方法を整理する役割を担います。 いずれにせよ、時間の...
継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...
しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築...
この記事では、水平棒グラフを実現するためのvue echartsの具体的なコードを参考までに共有しま...
1. 以前のバージョン yum 削除 docker docker-client docker-cli...
1. テーブルを作成する<br /> まず、2 つのテーブル (users テーブルと...
Centos6.5にmysql5.7.19をインストールするための詳細な手順は次のとおりです。 1....
序文: MySQL を使用すると、時間の表示が正しくない、タイムゾーンが GMT+8 ゾーンにない、...
目次1. カウンターの実装2. 成果を達成する1. カウンターの実装ページにカウンターを実装するだけ...