vue2 と vue3 の双方向バインディングの違いは何ですか?

vue2 と vue3 の双方向バインディングの違いは次のとおりです: vue2 は「Object.defineProperty」オブジェクトとオブジェクト プロパティのハイジャックを使用して双方向バインディングを実装しますが、vue3 の応答性は「プロキシ」を使用します。 ES6 のメソッドは双方向バインディングを実装します。

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

Vue2 と Vue3 の双方向バインディングの違い

# Vue2 の双方向データ バインディングの問題:

オブジェクトについて: Vue は、オブジェクトの追加または削除を検出できません。ちゃんとした。

配列について: インデックスを使用して配列項目を直接設定することはできません。また、配列の長さを変更することもできません。

Vue2.0

原則: Object.defineProperty オブジェクトとオブジェクト プロパティのハイジャックを使用して、パブリッシュおよびサブスクライブ モードを実行します。データが変更される限り、変更を直接通知し、ドライブを実行します。ビューの更新。

文法:

Object.defineProperty(obj, "name", { get:()=> {}, set:()=> {})

パラメータ 1: obj: ハイジャック オブジェクト、パラメータ 2: "name": ハイジャック オブジェクト属性、パラメータ 3: 属性に set メソッドと get メソッドを追加します

例:

 let obj = { name: "tom", age: 10 };
    Object.defineProperty(obj, "name", {
      get: () => {
        console.log("访问了name属性");
      },
      set: (newVule) => {
        console.log("设置了name属性");
      },
    });
    obj.name; //触发get
    obj.name = "jack";//触发set

Vue3.0

原則: Vue3.0 の応答性は、ES6 の Proxy メソッドを使用します。プロキシ オブジェクトは、基本操作 (属性検索、割り当て、列挙、関数呼び出しなど) のカスタム動作を定義するために使用されます。

構文:

let p =new Proxy(obj,{get:(target,prop,p)=>{},set:(target, prop, vaule, p)=>{}})

パラメーター 1: ターゲット: ハイジャック オブジェクト、パラメータ番号 2: prop: オブジェクト属性のハイジャック、パラメータ 3: vaule: 新しい属性値、p: それ自体

例:

   // vue3
    let p = new Proxy(obj, {
      get: (target, prop, p) => {
        console.log("获取");
        return prop in target ? target[prop] : "默认值";
      },
      set: (target, prop, vaule, p) => {
        console.log("设置");
        target[prop] = vaule;
      },
    });
    console.log(p.name); //访问了name属性
    console.log((p.name = "java")); //设置了name属性

概要:

vue2 は Object を渡します。オブジェクト内のすべてのプロパティをハイジャックします。

vue3 は、プロキシを通じてオブジェクト内のすべてのプロパティをハイジャックします。

[関連する推奨事項: "vue.js チュートリアル 》]

以上がvue2 と vue3 の双方向バインディングの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。