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

而在vue3.0中這個(gè)方法被取代了

1. 為什么要替換Object.defineProperty

替換不是因?yàn)椴缓茫且驗(yàn)橛懈玫姆椒ㄊ褂眯矢?/p>

Object.defineProperty的缺點(diǎn)：

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

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

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

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

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

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

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

1. 可以劫持整個(gè)對(duì)象，并返回一個(gè)新對(duì)象
2. 有13種劫持操作

2. 什么是Proxy

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

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

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

基本用法：

let p = new Proxy(target, handler);

參數(shù)：

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

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

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

舉個(gè)例子：

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實(shí)現(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);
}

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

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

總結(jié)

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

最新評(píng)論