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クラスターを素早くデプロイする方法
目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...
無料ポイントインタビュアー:Linuxを使ったことはありますか?私:はいインタビュアー:メモリ使用量...
Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...
垂直分割垂直分割とは、データテーブルの列を分割すること、つまり、多くの列を持つテーブルを複数のテーブ...
この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...
序文:ルートでは、主要部分は同じでも、基礎となる構造が異なることがあります。たとえば、ホームページに...
テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...
簡単な説明<br />IE6および7では、一般的なaタグ(HTMLで記述され、DOM操作...
DML 操作とは、データベース内のテーブル レコードに対する操作を指し、主にテーブル レコードの挿入...
この記事では、ディープラーニングフレームワーク keras を使用して、SQL インジェクションの特...
この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...
1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...
コードをコピーコードは次のとおりです。 1. 新浪微博<a href="http:/...
目次前面に書かれたルータ.jsonルート生成メニュー生成効果要約する前面に書かれたルートを繰り返し記...
デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつ...