vue3.0中的雙向數據綁定方法及優缺點

熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty來實現雙向數據綁定的

而在vue3.0中這個方法被取代了

1. 為什么要替換Object.defineProperty

替換不是因為不好，是因為有更好的方法使用效率更高

Object.defineProperty的缺點：

1. 在Vue中，Object.defineProperty無法監控到數組下標的變化，

導致直接通過數組的下標給數組設置值，不能實時響應。

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2. Object.defineProperty只能劫持對象的屬性,因此我們需要對每個對象的每個屬性進行遍歷。

Vue里，是通過遞歸以及遍歷data對象來實現對數據的監控的，

如果屬性值也是對象那么需要深度遍歷,顯然如果能劫持一個完整的對象，不管是對操作性還是性能都會有一個很大的提升。

而要取代它的Proxy有以下兩個優點：

1. 可以劫持整個對象，并返回一個新對象
2. 有13種劫持操作

2. 什么是Proxy

Proxy是 ES6 中新增的一個特性，翻譯過來意思是"代理"，用在這里表示由它來“代理”某些操作。 Proxy 讓我們能夠以簡潔易懂的方式控制外部對對象的訪問。其功能非常類似于設計模式中的代理模式。

Proxy 可以理解成，在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。

使用 Proxy 的核心優點是可以交由它來處理一些非核心邏輯（如：讀取或設置對象的某些屬性前記錄日志；設置對象的某些屬性值前，需要驗證；某些屬性的訪問控制等）。 從而可以讓對象只需關注于核心邏輯，達到關注點分離，降低對象復雜度等目的。

基本用法：

let p = new Proxy(target, handler);

參數：

target: 是用Proxy包裝的被代理對象（可以是任何類型的對象，包括原生數組，函數，甚至另一個代理）。
handler: 是一個對象，其聲明了代理target 的一些操作，其屬性是當執行一個操作時定義代理的行為的函數。

p是Proxy對象，當其他操作對p進行更改的時候，會執行handler對象的方法。Proxy有13種數據劫持的操作，常用的handler處理方法：

get: 讀取值，
set: 獲取值，
has: 判斷對象是否擁有該屬性，
construct: 構造函數

舉個例子：

let obj = {};
 let handler = {
  get(target, property) {
  console.log(`${property} 被讀取`);
  return property in target ? target[property] : 3;
  },
  set(target, property, value) {
  console.log(`${property} 被設置為 ${value}`);
  target[property] = value;
  }
 }
 let p = new Proxy(obj, handler);
 p.name = 'tom' //name 被設置為 tom
 p.age; //age 被讀取 3

更多的Proxy屬性方法參考MDN Proxy

3. Proxy實現數據劫持

observe(data) {
 const that = this;
 let handler = {
  get(target, property) {
   return target[property];
  },
  set(target, key, value) {
   let res = Reflect.set(target, key, value);
   that.subscribe[key].map(item => {
    item.update();
   });
   return res;
  }
 }
 this.$data = new Proxy(data, handler);
}

這段代碼里把代理器返回的對象代理到this.$data，即this.$data是代理后的對象，外部每次對this.$data進行操作時，實際上執行的是這段代碼里handler對象上的方法。

注：這兒用到了reflect屬性，這也是ES6里面的，不知道的去這兒看看吧。reflect屬性

總結

以上所述是小編給大家介紹的vue3.0中的雙向數據綁定方法及優缺點,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！