vue2和vue3雙向綁定的差異是什麼

vue2和vue3中雙向綁定的區別是：vue2中使用“Object.defineProperty”物件以及物件屬性的劫持實現雙向綁定；而vue3中的響應式採用了ES6中的“Proxy”方法實作雙向綁定。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue2與vue3雙向綁定的差異是什麼

Vue2雙向資料綁定存在的問題：

                          

                          關於陣列：無法使用指標以直接設定陣列的長度也無法修改陣列的長度。

 Vue2.0

原則：使用Object.defineProperty物件以及物件屬性的劫持 發佈訂閱模式，只要資料變更直接通知變更 並驅動檢視更新。

語法：

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

       參數一： obj:劫持對象，參數二："name":劫持對象屬性 ,  參數三：為屬性新增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 方法。 Proxy 對像用於定義基本操作的自訂行為（如屬性查找、賦值、枚舉、函數呼叫等）

語法：  

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

 參數一： target:劫持對象，參數二：prop:劫持物件屬性 ,  參數三：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. defineProperty劫持的是物件中每一個屬性

vue3透過Proxy劫持的是物件中每一個屬性

【相關推薦：《vue.js教學
## 》】

####

以上是vue2和vue3雙向綁定的差異是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！