Vue3.0 嚐鮮，Object.defineProperty VS Proxy

寫在前面：

一、為什麼要取代Object.defineProperty

既然要取代Object.defineProperty，那它肯定是有一些明顯的缺點，總結起來大概是下面兩個：

1、在Vue中，Object.defineProperty無法監控到數組下標的變化，導致直接通過數組的下標給數組設置值，不能實時響應。 為了解決這個問題，經過vue內部處理後可以使用以下幾種方法來監聽數組 （評論區有提到，Object.defineProperty本身是可以監控到數組下標的變化的，具體可參 Vue為什麼不能檢測數組變動(https://segmentfault.com/a/1190000015783546) ）

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

由於只針對了以上八種方法進行了hack處理,所以其他數組的屬性也是檢測不到的，還是具有一定的侷限性。

2、Object.defineProperty只能劫持對象的屬性,因此我們需要對每個對象的每個屬性進行遍歷。Vue裡，是通過遞歸以及遍歷data 對象來實現對數據的監控的，如果屬性值也是對象那麼需要深度遍歷,顯然如果能劫持一個完整的對象，不管是對操作性還是性能都會有一個很大的提升。

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

• 可以劫持整個對象，並返回一個新對象
• 有13種劫持操作

看到這可能有同學要問了，既然Proxy能解決以上兩個問題，而且Proxy屬性在vue2.x之前就有了，為什麼vue2.x不使用Proxy呢？一個很重要的原因就是：

• Proxy是es6提供的新特性，兼容性不好，最主要的是這個屬性無法用polyfill來兼容

經評論提醒，目前Proxy並沒有有效的兼容方案，未來大概會是3.0和2.0並行，需要支持IE的選擇2.0

關於Object.defineProperty來實現觀察者機制，可以參照 剖析Vue原理&實現雙向綁定MVVM(https://segmentfault.com/a/1190000006599500) 這篇文章，下面的內容主要介紹如何基於 Proxy來實現vue觀察者機制。

二、什麼是Proxy

1.含義：

• Proxy是 ES6 中新增的一個特性，翻譯過來意思是"代理"，用在這裡表示由它來“代理”某些操作。 Proxy 讓我們能夠以簡潔易懂的方式控制外部對對象的訪問。其功能非常類似於設計模式中的代理模式。
• Proxy 可以理解成，在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。
• 使用 Proxy 的核心優點是可以交由它來處理一些非核心邏輯（如：讀取或設置對象的某些屬性前記錄日誌；設置對象的某些屬性值前，需要驗證；某些屬性的訪問控制等）。 從而可以讓對象只需關注於核心邏輯，達到關注點分離，降低對象複雜度等目的。

2.基本用法：

let p = new Proxy(target, handler);

參數：

target 是用Proxy包裝的被代理對象（可以是任何類型的對象，包括原生數組，函數，甚至另一個代理）。

handler 是一個對象，其聲明瞭代理target 的一些操作，其屬性是當執行一個操作時定義代理的行為的函數。

p 是代理後的對象。當外界每次對 p 進行操作時，就會執行 handler 對象上的一些方法。Proxy共有13種劫持操作，handler代理的一些常用的方法有如下幾個：

get：讀取
set：修改
has：判斷對象是否有該屬性
construct：構造函數

3.示例：

下面就用Proxy來定義一個對象的get和set，作為一個基礎demo

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基本用法，實際上這個屬性還有許多內容，具體可參考 Proxy文檔(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy)

三、基於Proxy來實現雙向綁定

話不多說，接下來我們就來用Proxy來實現一個經典的雙向綁定todolist，首先簡單的寫一點html結構：

 
 
您輸入的是： 

 <button>添加到todolist/<button>
 

 
 

先來一個Proxy，實現輸入框的雙向綁定顯示：

const obj = {};
 const input = document.getElementById("input");
 const title = document.getElementById("title");
 const list = document.getElementById("list");
 const btn = document.getElementById("btn");
 const newObj = new Proxy(obj, {
 get: function(target, key, receiver) {
 console.log(`getting ${key}!`);
 return Reflect.get(target, key, receiver);
 },
 set: function(target, key, value, receiver) {
 console.log(target, key, value, receiver);
 if (key === "text") {
 input.value = value;
 title.innerHTML = value;
 }
 return Reflect.set(target, key, value, receiver);
 }
 });
 input.addEventListener("keyup", function(e) {
 newObj.text = e.target.value;
 });

這裡代碼涉及到Reflect屬性，這也是一個es6的新特性，還不太瞭解的同學可以參考 Reflect文檔(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect) 。 接下來就是添加todolist列表，先把數組渲染到頁面上去：

// 渲染todolist列表
 const Render = {
 // 初始化
 init: function(arr) {
 const fragment = document.createDocumentFragment();
 for (let i = 0; i < arr.length; i++) {
 const li = document.createElement("li");
 li.textContent = arr[i];
 fragment.appendChild(li);
 }
 list.appendChild(fragment);
 }, 

 addList: function(val) {
 const li = document.createElement("li");
 li.textContent = val;
 list.appendChild(li);
 }
 };

再來一個Proxy，實現Todolist的添加：

const arr = [];
 // 監聽數組
 const newArr = new Proxy(arr, {
 get: function(target, key, receiver) {
 return Reflect.get(target, key, receiver);
 },
 set: function(target, key, value, receiver) {
 console.log(target, key, value, receiver);
 if (key !== "length") {
 Render.addList(value);
 }
 return Reflect.set(target, key, value, receiver);
 }
 });
 // 初始化
 window.onload = function() {
 Render.init(arr);
 };
 btn.addEventListener("click", function() {
 newArr.push(parseInt(newObj.text));
 });

這樣就用 Proxy實現了一個簡單的雙向綁定Todolist,具體代碼可參考 proxy.html(https://github.com/nightzing/vue3-Proxy/blob/master/proxy.html)

四.基於Proxy來實現vue的觀察者機制

1.Proxy實現observe

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對象上的方法。

2.compile和watcher

比較熟悉vue的同學都很清楚，vue2.x在 new Vue() 之後。 Vue 會調用 _init 函數進行初始化，它會初始化生命週期、事件、 props、 methods、 data、 computed 與 watch 等。其中最重要的是通過 Object.defineProperty 設置 setter 與 getter 函數，用來實現「響應式」以及「依賴收集」。類似於下面這個內部流程圖：

而我們上面已經用Proxy取代了Object.defineProperty這部分觀察者機制，而要實現整個基本mvvm雙向綁定流程，除了observe還需要compile和watche等一系列機制，我們這裡像模板編譯的工作就不展開描述了，為了實現基於Proxy的vue添加Totolist,這裡只寫了 compile和watcher來支持observe的工作，具體代碼參考 proxyVue(https://github.com/nightzing/vue3-Proxy/blob/master/proxyVue.html) ,這個代碼相當於一個基於Proxy的一個簡化版vue，主要是實現雙向綁定這個功能，為了方便這裡把js放到了html頁面中，大家本地運行後可以發現，現在的效果和第三章的效果達到一致了，等到明年vue3發佈，它源碼裡基於 Proxy實現的的觀察者機制可能和這裡的實現會有很多不同。

這篇文章主要是對 Proxy這個特性做了一些介紹以及它的一些應用，而作者本人也通過對Proxy 的觀察者機制探索學到了不少東西，所以整合資源，總結出了這篇文章，希望能和大家共勉之，以上，我們下次有緣再見。

閱讀更多 開發者公眾號大全 的文章

關鍵字: 設計模式