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()

目前只針對以上方法做了hack處理，所以恰數組屬性是檢測不到的，有侷限性。

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屬性

文章轉載至：https://segmentfault.com/a/1190000017397797