vue2和vue3雙向綁定實例分析

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

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

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue2和vue3雙向綁定的區(qū)別是什么

Vue2雙向數(shù)據(jù)綁定存在的問題：

關(guān)于對象： Vue 無法檢測 property 的添加或移除。

關(guān)于數(shù)組：不能利用索引直接設置一個數(shù)組項,也不能修改數(shù)組的長度。

Vue2.0

原理：使用Object.defineProperty對象以及對象屬性的劫持+發(fā)布訂閱模式，只要數(shù)據(jù)發(fā)生變化直接通知變化 并驅(qū)動視圖更新。

語法：

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

參數(shù)一： obj:劫持對象，參數(shù)二："name":劫持對象屬性 ,  參數(shù)三：給屬性添加set,get方法

例子：

 let obj = { name: "tom", age: 10 };
    Object.defineProperty(obj, "name", {
      get: () => {
        console.log("訪問了name屬性");
      },
      set: (newVule) => {
        console.log("設置了name屬性");
      },
    });
    obj.name; //觸發(fā)get
    obj.name = "jack";//觸發(fā)set

Vue3.0

原理：Vue3.0中的響應式采用了ES6中的 Proxy 方法。Proxy 對象用于定義基本操作的自定義行為（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）

語法：

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

參數(shù)一： target:劫持對象，參數(shù)二：prop:劫持對象屬性 ,  參數(shù)三：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屬性

關(guān)于“vue2和vue3雙向綁定實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。