vue2和vue3雙向綁定實例分析

這篇文章主要介紹“vue2和vue3雙向綁定實例分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue2和vue3雙向綁定實例分析”文章能幫助大家解決問題。

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

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

vue2和vue3雙向綁定的區別是什么

Vue2雙向數據綁定存在的問題：

關于對象： Vue 無法檢測 property 的添加或移除。

關于數組：不能利用索引直接設置一個數組項,也不能修改數組的長度。

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和vue3雙向綁定實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。