熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty來實現(xiàn)雙向數(shù)據(jù)綁定的

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

1. 為什么要替換Object.defineProperty

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

Object.defineProperty的缺點：

1. 在Vue中，Object.defineProperty無法監(jiān)控到數(shù)組下標(biāo)的變化，

導(dǎo)致直接通過數(shù)組的下標(biāo)給數(shù)組設(shè)置值，不能實時響應(yīng)。

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

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

Vue里，是通過遞歸以及遍歷data對象來實現(xiàn)對數(shù)據(jù)的監(jiān)控的，

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

而要取代它的Proxy有以下兩個優(yōu)點：

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

2. 什么是Proxy

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

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

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

基本用法：

let p = new Proxy(target, handler);

參數(shù)：

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

p是Proxy對象，當(dāng)其他操作對p進(jìn)行更改的時候，會執(zhí)行handler對象的方法。Proxy有13種數(shù)據(jù)劫持的操作，常用的handler處理方法：

get: 讀取值，
set: 獲取值，
has: 判斷對象是否擁有該屬性，
construct: 構(gòu)造函數(shù)

舉個例子：

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

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

3. Proxy實現(xiàn)數(shù)據(jù)劫持

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進(jìn)行操作時，實際上執(zhí)行的是這段代碼里handler對象上的方法。

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

總結(jié)

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

最新評論