Apakah perbezaan antara vue2 dan vue3 pengikatan dua hala?

Perbezaan antara pengikatan dua hala dalam vue2 dan vue3 ialah: vue2 menggunakan objek "Object.defineProperty" dan rampasan sifat objek untuk melaksanakan pengikatan dua hala manakala responsif dalam vue3 menggunakan "Proxy " dalam Kaedah ES6 untuk melaksanakan pengikatan dua hala.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah perbezaan antara pengikatan dua hala vue2 dan vue3?

Masalah dengan pengikatan data dua hala Vue2:

Mengenai objek: Vue tidak dapat mengesan penambahan atau pengalihan keluar daripada hartanah.

Mengenai tatasusunan: Anda tidak boleh menggunakan indeks untuk menetapkan item tatasusunan secara langsung, anda juga tidak boleh mengubah suai panjang tatasusunan.

Vue2.0

Prinsip: Gunakan objek Object.defineProperty dan rampasan sifat objek untuk menerbitkan dan melanggan Selagi data berubah, ia akan memberitahu perubahan secara langsung dan memacunya lihat kemas kini.

Sintaks:

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

Parameter satu: obj: objek rampasan, parameter dua: "nama": atribut objek rampas, parameter tiga: tambah set dan dapatkan kaedah kepada atribut

Contoh:

 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

Prinsip: Responsif dalam Vue3.0 menggunakan kaedah Proksi dalam ES6. Objek proksi digunakan untuk mentakrifkan gelagat tersuai untuk operasi asas (seperti carian atribut, tugasan, penghitungan, panggilan fungsi, dll.)

Sintaks:

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

Parameter 1: sasaran: rampasan objek , Parameter dua: prop: atribut objek rampasan, Parameter tiga: vakum: nilai atribut baharu, p: sendiri

Contoh:

   // 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属性

Ringkasan:

rampasan vue2 setiap harta dalam objek melalui Object.defineProperty

vue3 merampas setiap harta dalam objek melalui Proksi

[Cadangan berkaitan: "Tutorial vue.js》】

Atas ialah kandungan terperinci Apakah perbezaan antara vue2 dan vue3 pengikatan dua hala?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!