Vue2.0/3.0双方向データバインディングの実装原理双方向データバインディングとは、データの変更によってページが再レンダリングされることを意味します。 Vue2.0 ES5の原則: Object.definePropertyはデータをインターセプトします シンプルな小型ケース <本文> 名前: <span id="名前"></span> <br /> <input type="text" id="入力名" /> </本文> 入力ボックスの値を変更すると、それに応じてスパンの値も変更されます。データの変更により、ビューが <スクリプト> obj = { 名前:'' } オブジェクト.defineProperty(obj,'name',{ 得る(){ return this.name //エラーのデモではこれを使用して無限ループを形成することはできないため、新しい値を準備する必要があることに注意してください}, set(val){ } }) </スクリプト> 正しい書き方 <スクリプト> obj = { 名前: "" }; newObj = JSON.parse(JSON.stringify(obj)); Object.defineProperty(obj, "名前", { 得る() { newObj.name を返します。 }, 設定(値) { if (val === newObj.name) return; // パフォーマンスを最適化するために判断を増やします。新しい値が古い値と同じ場合はそれを返します。異なる場合は、値を再割り当てします。newObj.name = val; obServer(); } }); // 再割り当てメソッド function obServer() { spanName.innerHTML = newObj.name; //obj.name の値を取得します。 inputName.value = newObj.name; } obServer(); // 最初に1回実行 setTimeout(() => { obj.name = "大左"; }, 1000); </スクリプト> 実行ロジック 1. setTimeout は 1 秒後に実行され、データが変更されて obj.name の set (val) がトリガーされます。 2. 最新の値を取得し、それをnewObj.nameに渡してobServer()メソッドを実行します。 3. 最新の値を取得し、spanName.innerHTML = newObj.name; inputName.value = newObj.name; を割り当てます。 入力ボックスの値が変更され、それに応じてスパンボックスの値も変更されます。 inputName.oninput = 関数() { obj.name = this.value; }; この操作はVueではv-modelと呼ばれます。 Vue 2.0の欠点1. 元のデータを複製する必要があります。そうしないと、上記のように無限ループが発生します。 2. オブジェクト内のデータの取得と設定をインターセプトしたい場合は、オブジェクト内の属性を 1 つずつ設定し、個別に監視する必要があります。属性が複数ある場合は、それらをループして個別に監視する必要があります。 vue2.0 でデータを逆順に見る データ(){ 戻る { オブジェクト:{} } } this.obj.name='XXX' // この操作は、obj の先頭に名前がないため機能しません。そのため、監視は実行されません。これは、上記の 2 番目の項目が原因です。 では、もう一度見てみましょう。 3.0 の機能と利点SE6では主にプロキシを使用 <スクリプト> obj = {} とします。 obj = 新しいプロキシ(obj, { get(ターゲット、プロパティ) { コンソールログ("D"); ターゲット[prop]を返します。 }, set(ターゲット、プロパティ、値) { コンソールログ("Z"); ターゲット[prop] = 値; } }); //オブジェクト全体を監視するには属性を指定する必要はなく、これはオブジェクト内のすべての属性を監視するのと同じです。したがって、全体のセットを記述するだけです。 </スクリプト> 1. get をトリガーするために obj.name を取得します。ここには名前はありませんが、値がないので実行でき、undefine を返します。 2.トリガーセットを確認するには、名前の値を設定します 3. obj.nameを再度取得して値があるかどうかを確認します したがって、現在オブジェクトに特定の属性があるかどうかに関係なく、ここで監視されているのはオブジェクト全体であるため、オブジェクト内の将来のすべての属性が2.0の欠点を補うことになります。 1. クローンを作成する必要はありません 2. 各オブジェクトのプロパティを個別に設定する必要はなく、オブジェクト全体に設定するだけで済みます。清潔で衛生的です。 上記の2.0操作を再度実装する <スクリプト> obj = {} とします。 obj = 新しいプロキシ(obj, { get(ターゲット、プロパティ) { コンソールログ("D"); ターゲット[prop]を返します。 }, set(ターゲット、プロパティ、値) { コンソールログ("Z"); ターゲット[prop] = 値; obServer(); } }); //オブジェクト全体を監視するには属性を指定する必要はなく、これはオブジェクト内のすべての属性を監視するのと同じです。したがって、全体のセットを記述するだけです。 // 再割り当てメソッド function obServer() { spanName.innerHTML = obj.name; //obj.name の値を取得します。 inputName.value = obj.name; } obServer(); // 最初に1回実行 setTimeout(() => { obj.name = "大左"; }, 1000); inputName.oninput = 関数() { obj.name = this.value; }; </スクリプト> 要約するVue2.0/3.0 双方向データバインディングの実装原理に関するこの記事はこれで終わりです。Vue 双方向データバインディング原理に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 36)
>>: Dockerを使用してElasticsearchクラスターを素早くデプロイする方法
nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...
目次序文1. インストール1.公式サイトからダウンロード2. 構成を作成する3. MySQLを初期化...
目次コンストラクタインスタンスとプロトタイプの関係プロトタイププロパティ属性またはメンバーの検索原則...
1. 基本的な使い方 <!DOCTYPE html> <html lang=&qu...
Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...
Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...
目次1 概念上の区別2 事例紹介3 クエリパフォーマンス4 アップデートのパフォーマンス4.1 記憶...
MySQL のCAST()およびCONVERT()関数を使用すると、ある型の値を取得し、別の型の値を...
VirtualBoxのインストールディレクトリを見つけます。ディレクトリ内には容量を拡張するために...
1. 新しいユーザーwwweee000を作成します [root@localhost ~]# user...
文書タイプDoctype は、指示を解析するためにどのバージョンの HTML を使用するかをブラウザ...
目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...
目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...
昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...
この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...