Vue3.0數據雙向綁定Proxy探究

stormzhang 發布于2019-08-23 14:07 / 1873人閱讀

摘要：只能劫持對象的屬性因此我們需要對每個對象的每個屬性進行遍歷。屬性對于怎么拼接到和上面說到了怎么使用做數據劫持，怎么結合訂閱發布，請結合數據雙向綁定探究對照著數據劫持的部分去替換看一下。

前言

2018年11月16日，關注vue的人都知道這個時間點發生了什么事兒吧。vue3.0更新內容

研究數據雙向綁定的大佬們都在開始猜測這個新機制了，用原生Proxy替換Object.defineProperty

1. 為什么要替換Object.defineProperty

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

Object.defineProperty的缺點：

在Vue中，Object.defineProperty無法監控到數組下標的變化，導致直接通過數組的下標給數組設置值，不能實時響應。為了解決這個問題，經過vue內部處理后可以使用以下幾種方法來監聽數組。有關于這個說明，可以看看這個文章 vue為什么不能檢測數組變動

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

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

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

4. 對于怎么拼接到watcher和compile

上面說到了怎么使用Proxy做數據劫持，怎么結合訂閱發布，請結合 vue2.0數據雙向綁定探究對照著Object.defineProperty
數據劫持的部分去替換看一下。其他的設計思想估計跟之前的八九不離十。

云服務器 GPU云服務器 vue3.0使用cdn 雙向數據綁定 js雙向數據綁定 js雙向綁定數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100117.html

學習MVVM及框架的雙向綁定筆記

摘要：的數據劫持版本內部使用了來實現數據與視圖的雙向綁定，體現在對數據的讀寫處理過程中。這樣就形成了數據的雙向綁定。 MVVM由以下三個內容組成 View：視圖模板 Model：數據模型 ViewModel：作為橋梁負責溝通View和Model，自動渲染模板在JQuery時期，如果需要刷新UI時，需要先取到對應的DOM再更新UI，這樣數據和業務的邏輯就和頁面有強耦合。在MVVM中，U...

VioletJack 2019-08-23 15:04 評論0 收藏0
使用Proxy實現雙向綁定

摘要：取出所有屬性遍歷不允許綁定在非對象上進行數組操作時，會進行兩次一次數據改變，一次改變，兩次改變的值是不變，因此不應該多分發一次消息通知訂閱者前言：vue3.0要用Proxy來實現雙向綁定，因此先來嘗試一下實現方法。 1 Object.defineProperty 實現原來vue2的實現使用Object.defineProperty，監聽set，但對于數組直接下標給數組設置值監聽不了。...

Yang_River 2019-08-23 16:06 評論0 收藏0
Vue數據響應式原理筆記就幾行沒啥可看的

摘要：什么是數據響應式數據響應式既數據雙向綁定，就是把綁定到，當我們用代碼更新時，就會自動更新如果用戶更新了的數據也自動本更新。數據響應式的原理實現數據響應式的原理就是利用了這個方法重新定義了對象獲取屬性值和設置屬性值的操作來實現。 1、什么是數據響應式數據響應式既數據雙向綁定，就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新；如果用戶...

SillyMonkey 2019-08-23 18:33 評論0 收藏0
初識Proxy、Reflect

摘要：主要原因應該是在處理數組響應是會存在缺陷。構造函數其中表示生成一個實例，為需要代理的對象，則是一個對象，定義了各種代理行為。對于滿足條件的屬性以及其他屬性，直接保存報錯報錯攔截的操作，返回一個布爾值。前言 https://segmentfault.com/a/11... Vue3.0應該馬上就要發布正式版了。聽說在新版本中，Proxy取代了Object.defineProperty進...

gougoujiang 2019-08-23 14:35 評論0 收藏0
精讀《Vue3.0 Function API》

摘要：拿到的都是而不是原始值，且這個值會動態變化。精讀對于的與，筆者做一些對比。因此采取了作為優化方案只有當第二個依賴參數變化時才返回新引用。不需要使用等進行性能優化，所有性能優化都是自動的。前端精讀幫你篩選靠譜的內容。 1. 引言 Vue 3.0 的發布引起了軒然大波，讓我們解讀下它的 function api RFC 詳細了解一下 Vue 團隊是怎么想的吧！首先官方回答了幾個最受關注的...

voyagelab 2019-08-23 18:24 評論0 收藏0