Vue3 為何使用 Proxy 實現資料監聽

筱月發表於2020-08-06
Vue

部落格地址：https://ainyi.com/93

vue3 響應式資料放棄了 Object.defineProperty，而使用Proxy來代替它

我們知道，在 vue2 中，實現資料監聽是使用Object.defineProperty --> 實現方法可看：vue 資料雙向繫結原理

而這個方法有缺點，並且不能實現陣列和物件的部分監聽情況；具體也可以看我之前寫的一篇部落格：關於 Vue 不能 watch 陣列 和 物件變化的解決方案

最新的 Proxy，相比 vue2 的 Object.defineProperty，能達到速度加倍、記憶體減半的成效。
具體是怎麼實現、以及對比舊的實現方法為啥能有速度加倍、記憶體減半的特性

下面來聊聊

Vue 初始化過程

Vue 的初始化過程，分別有Observer、Compiler和Watcher
當我們 new Vue 的時候，會呼叫Observer，通過 Object.defineProperty 遍歷 vue 物件的 data、computed 或者 props（如果是元件的話）的所有屬性進行監聽。同時通過Compiler解析模板指令，解析到屬性後就 new 一個Watcher並繫結更新函式到 watcher 當中，Observer 和 Compiler 就通過屬性來進行關聯

WechatIMG198.png

如上，當 Observer 中的 setter 檢測到屬性值改變的時候，就呼叫屬性對應的所有 watcher 呼叫更新函式，從而更新到屬性對應的 dom

Object.defineProperty

來個簡單的 Object.defineProperty 例子

class Observer {
  constructor(data) {
    // 遍歷引數 data 的屬性，給新增到 this 上
    for(let key of Object.keys(data)) {
      if(typeof data[key] === 'object') {
        data[key] = new Observer(data[key]);
      }
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          console.log('你訪問了' + key)
          return data[key]
        },
        set(newVal) {
          console.log('你設定了' + key)
          console.log('新的' + key + '=' + newVal)
          if(newVal === data[key]) {
            return
          }
          data[key] = newVal
        }
      })
    }
  }
}

const obj = {
    name: 'app',
    age: '18',
    a: {
        b: 1,
        c: 2,
    },
}
const app = new Observer(obj);
app.age = 20;
console.log(app.age);
app.newPropKey = '新屬性';
console.log(app.newPropKey);

輸出如下：

你設定了age
新的age=20
你訪問了age
20
新屬性

從上面可以知道：

  1. Object.defineProperty 需要遍歷所有的屬性，這就造成了如果 vue 物件的 data/computed/props 中的資料規模龐大，那麼遍歷起來就會慢很多
  2. 同理，如果 vue 物件的 data/computed/props 中的資料規模龐大，那麼 Object.defineProperty 需要監聽所有的屬性的變化，那麼佔用記憶體就會很大

Proxy

再來看看 Proxy

Proxy 物件用於定義基本操作的自定義行為（如屬性查詢，賦值，列舉，函式呼叫等）

可以理解為在物件之前設定一個”攔截“，當監聽的物件被訪問的時候，都必須經過這層攔截。可以在這攔截中對原物件處理，返回需要的資料格式
也就是無論訪問物件的什麼屬性，之前定義的或是新增的屬性，都會走到攔截中進行處理。這就解決了之前所無法監聽的問題

官方例子：

const p = new Proxy(target, handler)

引數

  • target： 要使用 Proxy 包裝的目標物件（可以是任何型別的物件，包括原生陣列，函式，甚至另一個代理）
  • handler：一個通常以函式作為屬性的物件，各屬性中的函式分別定義了在執行各種操作時代理 p 的行為

來個實際 Proxy 例子

const obj = {
  name: 'krry',
  age: 24,
  others: {
    mobile: 'mi10',
    watch: 'mi4'
  }
}
const p = new Proxy(obj, {
  get(target, key, receiver) {
    console.log('檢視的屬性為：' + key);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log('設定的屬性為：' + key);
    console.log('新的屬性：' + key, '值為：' + value);
    Reflect.set(target, key, value, receiver);
  }
})
p.age = 22
console.log(p.age)
console.log('--------')
p.single = 'NO'
console.log(p.single)
console.log('--------')
p.others.shoe = 'boost'
console.log(p.others.shoe)

輸出如下：

設定的屬性為：age
新的屬性：age 值為：22
檢視的屬性為：age
22
--------
設定的屬性為：single
新的屬性：single 值為：NO
檢視的屬性為：single
NO
--------
檢視的屬性為：others
檢視的屬性為：others
boost

由上可知，新增或編輯屬性，並不需要重新新增響應式處理，都能監聽的到
因為 Proxy 是對物件的操作，只要你訪問物件，就會走到 Proxy 的邏輯中

Reflect 是一個內建的物件，它提供攔截 JavaScript 操作的方法。這些方法與proxy handlers的方法相同。Reflect不是一個函式物件，因此它是不可構造的

區別

Proxy 和 Object.defineProperty 的使用方法看似很相似，其實 Proxy 是在更高維度上去攔截屬性的

Object.defineProperty

Vue2 中，對於給定的 data：如 { count: 1 }，是需要根據具體的 key 也就是 count，去對 get 和 set 進行攔截，也就是：

Object.defineProperty(data, 'count', {
  get() {},
  set() {},
})

必須預先知道要攔截的 key 是什麼，這也就是為什麼 Vue2 裡對於物件上的新增屬性無能為力，所以 Vue 初始化的過程中需要遍歷 data 來挾持資料變化，造成速度變慢，記憶體變大的原因


Proxy

而 Vue3 所使用的 Proxy，則是這樣攔截的：

new Proxy(data, {
  get(key) { },
  set(key, value) { },
})

可以看到，proxy 不需要關心具體的 key，它去攔截的是 修改 data 上的任意 key 和 讀取 data 上的任意 key
所以，不管是已有的 key 還是新增的 key，都會監聽到
但是 Proxy 更加強大的地方還在於 Proxy 除了 get 和 set，還可以攔截更多的操作符，具體可看 MDN

相容性

Proxy 對 IE 不友好，vue3 在檢測到使用 IE 的情況下（包括 IE11），會自動降級為 Object.defineProperty 的資料監聽系統

部落格地址：https://ainyi.com/93

相關文章