Vue2.0/3.0双方向データバインディングの実装原理の詳細説明

Vue2.0/3.0双方向データバインディングの実装原理の詳細説明

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue2.x と Vue3.x の双方向バインディング原則の詳細な説明
  • Vue のデータ応答性について少し学びましょう (Vue2 と Vue3 の違い)
  • Vue3.0 における双方向データバインディング方式とその利点と欠点
  • vue2 と vue3 の双方向データバインディングの違い

<<:  史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 36)

>>:  Dockerを使用してElasticsearchクラスターを素早くデプロイする方法

推薦する

ミニプログラムの基本的な使用方法の知識ポイント(非常に包括的で、お勧めです!)

目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...

コード標準では、SQL ステートメントに結合が多すぎないようにする必要があるのはなぜですか?

無料ポイントインタビュアー:Linuxを使ったことはありますか?私:はいインタビュアー:メモリ使用量...

Web ページのソース ファイルを表示できない場合はどうすればよいですか?

Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...

MySQL テーブルの垂直分割と水平分割

垂直分割垂直分割とは、データテーブルの列を分割すること、つまり、多くの列を持つテーブルを複数のテーブ...

Dockerコンテナの自動終了を停止する方法の詳細な説明

この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...

vue.js ルーターのネストされたルート

序文:ルートでは、主要部分は同じでも、基礎となる構造が異なることがあります。たとえば、ホームページに...

CSS3 のテキストとフォントの新しい設定

テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...

IE6/7 における a.getAttribute(href,2) 問題の分析と解決

簡単な説明<br />IE6および7では、一般的なaタグ(HTMLで記述され、DOM操作...

MySQL DML ステートメントの概要

DML 操作とは、データベース内のテーブル レコードに対する操作を指し、主にテーブル レコードの挿入...

Keras を使って SQL インジェクション攻撃を判断する (例の説明)

この記事では、ディープラーニングフレームワーク keras を使用して、SQL インジェクションの特...

jsを使用して簡単な抽選機能を実現する

この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...

ウェブページでよく使用される共有コードの完全なリスト(フロントエンドに必須)

コードをコピーコードは次のとおりです。 1. 新浪微博<a href="http:/...

vue構成ファイルはルーティングとメニューインスタンスコードを自動的に生成します

目次前面に書かれたルータ.jsonルート生成メニュー生成効果要約する前面に書かれたルートを繰り返し記...

Vueでスワイパープラグインを使用する際の問題を解決する

デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつ...