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クラスターを素早くデプロイする方法

推薦する

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

MySQL 8.0.26 のインストールとアンインストールの完全なステップバイステップの記録

目次序文1. インストール1.公式サイトからダウンロード2. 構成を作成する3. MySQLを初期化...

JavaScriptプロトタイプと例の詳細な説明

目次コンストラクタインスタンスとプロトタイプの関係プロトタイププロパティ属性またはメンバーの検索原則...

Better-scrollはメニューとコンテンツをリンクする効果を実現します

1. 基本的な使い方 <!DOCTYPE html> <html lang=&qu...

Linux システムで Code Cloud にプロジェクトをアップロードする方法

Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...

ホスト上のDockerコンテナ内でシェルまたはプログラムを実行する

Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...

MySQLの通常インデックスとユニークインデックスの違いの詳しい説明

目次1 概念上の区別2 事例紹介3 クエリパフォーマンス4 アップデートのパフォーマンス4.1 記憶...

MySQL データベースの型変換のための CAST 関数と CONVERT 関数の説明

MySQL のCAST()およびCONVERT()関数を使用すると、ある型の値を取得し、別の型の値を...

VirtualBox の仮想ディスク vdi ファイルの容量を拡張する方法 (グラフィック チュートリアル)

VirtualBoxのインストールディレクトリを見つけます。ディレクトリ内には容量を拡張するために...

Centos 7 sshd の変更 | ルートログインの禁止と sshd ポートスクリプトの定義

1. 新しいユーザーwwweee000を作成します [root@localhost ~]# user...

HTML の doctype とエンコーディングに関する簡単な説明

文書タイプDoctype は、指示を解析するためにどのバージョンの HTML を使用するかをブラウザ...

MySQLのLIMIT文について詳しく説明します

目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...

Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...

Dockerでコンテナを作成するときのディレクトリ権限

昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...

jsを使ってシンプルなディスククロックを実現する

この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...