Vue3.0 中的数据侦测
在10月05日凌晨Vue3的源代碼正式發布了，來自官方的消息：
?
?
?
目前的版本是 Pre-Alpha ， 倉庫地址： Vue-next， 可以通過 Composition API了解更多新版本的信息， 目前版本單元測試相關情況 vue-next-coverage。
文章大綱：
?
?
?
Vue 的核心之一就是響應式系統，通過偵測數據的變化，來驅動更新視圖。
實現可響應對象的方式
通過可響應對象，實現對數據的偵測，從而告知外界數據變化。實現可響應對象的方式：
關于前兩個 API 的使用方式不多贅述，單一的訪問器 getter/setter 功能相對簡單，而作為 Vue2.x 實現可響應對象的 API - defineProperty ， API 本身存在較多問題。
Vue2.x 中，實現數據的可響應，需要對 Object 和 Array 兩種類型采用不同的處理方式。 Object 類型通過 Object.defineProperty 將屬性轉換成 getter/setter ，這個過程需要遞歸偵測所有的對象 key，來實現深度的偵測。
為了感知 Array 的變化，對 Array 原型上幾個改變數組自身的內容的方法做了攔截，雖然實現了對數組的可響應，但同樣存在一些問題，或者說不夠方便的情況。 同時，defineProperty 通過遞歸實現 getter/setter 也存在一定的性能問題。
更好的實現方式是通過 ES6 提供的 Proxy API。
Proxy API 的一些細節
Proxy API 具有更加強大的功能， 相比舊的 defineProperty API ，Proxy 可以代理數組，并且 API 提供了多個 traps ，可以實現諸多功能。
這里主要說兩個trap: get 、 set ， 以及其中的一些比較容易被忽略的細節。
細節一：trap 默認行為
let data = { foo: 'foo' } let p = new Proxy(data, {get(target, key, receiver) {return target[key]},set(target, key, value, receiver) {console.log('set value')target[key] = value // ?} })p.foo = 123// set value 復制代碼通過 proxy 返回的對象 p 代理了對原始數據的操作，當對 p 設置時，便可以偵測到變化。但是這么寫實際上是有問題， 當代理的對象數據是數組時，會報錯。
let data = [1,2,3] let p = new Proxy(data, {get(target, key, receiver) {return target[key]},set(target, key, value, receiver) {console.log('set value')target[key] = value} })p.push(4) // VM438:12 Uncaught TypeError: 'set' on proxy: trap returned falsish for property '3' 復制代碼將代碼更改為：
let data = [1,2,3] let p = new Proxy(data, {get(target, key, receiver) {return target[key]},set(target, key, value, receiver) {console.log('set value')target[key] = valuereturn true} })p.push(4)// set value // 打印2次 復制代碼實際上，當代理對象是數組，通過 push 操作，并不只是操作當前數據，push 操作還觸發數組本身其他屬性更改。
let data = [1,2,3] let p = new Proxy(data, {get(target, key, receiver) {console.log('get value:', key)return target[key]},set(target, key, value, receiver) {console.log('set value:', key, value)target[key] = valuereturn true} })p.push(1)// get value: push // get value: length // set value: 3 1 // set value: length 4 復制代碼先看 set 操作，從打印輸出可以看出，push 操作除了給數組的第 3 位下標設置值 1 ，還給數組的 length 值更改為 4。 同時這個操作還觸發了 get 去獲取 push 和 length 兩個屬性。
我們可以通過 Reflect 來返回 trap 相應的默認行為，對于 set 操作相對簡單，但是一些比較復雜的默認行為處理起來相對繁瑣得多，Reflect 的作用就顯現出來了。
let data = [1,2,3] let p = new Proxy(data, {get(target, key, receiver) {console.log('get value:', key)return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {console.log('set value:', key, value)return Reflect.set(target, key, value, receiver)} })p.push(1)// get value: push // get value: length // set value: 3 1 // set value: length 4 復制代碼相比自己處理 set 的默認行為，Reflect 就方便得多。
細節二：多次觸發 set / get
從前面的例子中可以看出，當代理對象是數組時，push 操作會觸發多次 set 執行，同時，也引發 get 操作，這點非常重要，vue3 就很好的使用了這點。 我們可以從另一個例子來看這個操作：
let data = [1,2,3] let p = new Proxy(data, {get(target, key, receiver) {console.log('get value:', key)return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {console.log('set value:', key, value)return Reflect.set(target, key, value, receiver)} })p.unshift('a')// get value: unshift // get value: length // get value: 2 // set value: 3 3 // get value: 1 // set value: 2 2 // get value: 0 // set value: 1 1 // set value: 0 a // set value: length 4 復制代碼可以看到，在對數組做 unshift 操作時，會多次觸發 get 和 set 。 仔細觀察輸出，不難看出，get 先拿數組最末位下標，開辟新的下標 3 存放原有的末位數值，然后再將原數值都往后挪，將 0 下標設置為了 unshift 的值 a ，由此引發了多次 set 操作。
而這對于 通知外部操作 顯然是不利，我們假設 set 中的 console 是觸發外界渲染的 render 函數，那么這個 unshift 操作會引發 多次 render 。
我們后面會講述如何解決相應的這個問題，繼續。
細節三：proxy 只能代理一層
let data = { foo: 'foo', bar: { key: 1 }, ary: ['a', 'b'] } let p = new Proxy(data, {get(target, key, receiver) {console.log('get value:', key)return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {console.log('set value:', key, value)return Reflect.set(target, key, value, receiver)} })p.bar.key = 2// get value: bar 復制代碼執行代碼，可以看到并沒有觸發 set 的輸出，反而是觸發了 get ，因為 set 的過程中訪問了 bar 這個屬性。 由此可見，proxy 代理的對象只能代理到第一層，而對象內部的深度偵測，是需要開發者自己實現的。同樣的，對于對象內部的數組也是一樣。
p.ary.push('c')// get value: ary 復制代碼同樣只走了 get 操作，set 并不能感知到。
我們注意到 get/set 還有一個參數：receiver ，對于 receiver ，其實接收的是一個代理對象：
let data = { a: {b: {c: 1 } } } let p = new Proxy(data, {get(target, key, receiver) {console.log(receiver)const res = Reflect.get(target, key, receiver)return res},set(target, key, value, receiver) {return Reflect.set(target, key, value, receiver)} })// Proxy?{a: {…}} 復制代碼這里 receiver 輸出的是當前代理對象，注意，這是一個已經代理后的對象。
let data = { a: {b: {c: 1 } } } let p = new Proxy(data, {get(target, key, receiver) {const res = Reflect.get(target, key, receiver)console.log(res)return res},set(target, key, value, receiver) {return Reflect.set(target, key, value, receiver)} })// {b: {c: 1} }復制代碼當我們嘗試輸出 Reflect.get 返回的值，會發現，當代理的對象是多層結構時，Reflect.get 會返回對象的內層結構。
記住這一點，Vue3 實現深度的proxy ，便是很好的使用了這點。
解決 proxy 中的細節問題
前面提到了使用 Proxy 來偵測數據變化，有幾個細節問題，包括：
接下來，我們將先自己嘗試解決這些問題，后面再分析 Vue3 是如何解決這些細節的。
setTimeout 解決重復 trigger
function reactive(data, cb) {let timer = nullreturn new Proxy(data, {get(target, key, receiver) {return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {clearTimeout(timer)timer = setTimeout(() => {cb && cb()}, 0);return Reflect.set(target, key, value, receiver)}}) }let ary = [1, 2] let p = reactive(ary, () => {console.log('trigger') }) p.push(3)// trigger 復制代碼程序輸出結果為一個： trigger
這里實現了 reactive 函數，接收兩個參數，第一個是被代理的數據 data ，還有一個回調函數 cb， 我們這里先簡單的在 cb 中打印 trigger 操作，來模擬通知外部數據的變化。
解決重復的 cb 調用有很多中方式，比方通過標志，來決定是否調用。而這里是使用了定時器 setTimeout ， 每次調用 cb 之前，都清除定時器，來實現類似于 debounce 的操作，同樣可以解決重復的 callback 問題。
解決數據深度偵測
目前還有一個問題，那便是深度的數據偵測，我們可以使用遞歸代理的方式來實現：
function reactive(data, cb) {let res = nulllet timer = nullres = data instanceof Array ? []: {} for (let key in data) {if (typeof data[key] === 'object') {res[key] = reactive(data[key], cb)} else {res[key] = data[key]}}return new Proxy(res, {get(target, key) {return Reflect.get(target, key)},set(target, key, val) {let res = Reflect.set(target, key, val)clearTimeout(timer)timer = setTimeout(() => {cb && cb()}, 0)return res}}) }let data = { foo: 'foo', bar: [1, 2] } let p = reactive(data, () => {console.log('trigger') }) p.bar.push(3)// trigger 復制代碼對代理的對象進行遍歷，對每個 key 都做一次 proxy，這是遞歸實現的方式。 同時，結合前面提到的 timer 避免重復 set 的問題。
這里我們可以輸出代理后的對象 p ：
?
?
?
可以看到深度代理后的對象，都攜帶 proxy 的標志。
到這里，我們解決了使用 proxy 實現偵測的系列細節問題，雖然這些處理方式可以解決問題，但似乎并不夠優雅，尤其是遞歸 proxy 是一個性能隱患， 當數據對象比較大時，遞歸的 proxy 會消耗比較大的性能，并且有些數據并非需要偵測，我們需要對數據偵測做更細的控制。
接下來我們就看下 Vue3 是如何使用 Proxy 實現數據偵測的。
Vue3 中的 reactivity
Vue3 項目結構采用了 lerna 做 monorepo 風格的代碼管理，目前比較多的開源項目切換到了 monorepo 的模式， 比較顯著的特征是項目中會有個 packages/ 的文件夾。
Vue3 對功能做了很好的模塊劃分，同時使用 TS 。我們直接在 packages 中找到響應式數據的模塊：
?
?
?
其中，reactive.ts 文件提供了 reactive 函數，該函數是實現響應式的核心。 同時這個函數也掛載在了全局的 Vue 對象上。
這里對源代碼做一點程度的簡化：
const rawToReactive = new WeakMap() const reactiveToRaw = new WeakMap()// utils function isObject(val) {return typeof val === 'object' }function hasOwn(val, key) {const hasOwnProperty = Object.prototype.hasOwnPropertyreturn hasOwnProperty.call(val, key) }// traps function createGetter() {return function get(target, key, receiver) {const res = Reflect.get(target, key, receiver)return isObject(res) ? reactive(res) : res} }function set(target, key, val, receiver) {const hadKey = hasOwn(target, key)const oldValue = target[key]val = reactiveToRaw.get(val) || valconst result = Reflect.set(target, key, val, receiver)if (!hadKey) {console.log('trigger ...')} else if(val !== oldValue) {console.log('trigger ...')}return result }// handler const mutableHandlers = {get: createGetter(),set: set, }// entry function reactive(target) {return createReactiveObject(target,rawToReactive,reactiveToRaw,mutableHandlers,) }function createReactiveObject(target, toProxy, toRaw, baseHandlers) {let observed = toProxy.get(target)// 原數據已經有相應的可響應數據, 返回可響應數據if (observed !== void 0) {return observed}// 原數據已經是可響應數據if (toRaw.has(target)) {return target}observed = new Proxy(target, baseHandlers)toProxy.set(target, observed)toRaw.set(observed, target)return observed } 復制代碼rawToReactive 和 reactiveToRaw 是兩個弱引用的 Map 結構，這兩個 Map 用來保存 原始數據 和 可響應數據 ，在函數 createReactiveObject 中，toProxy 和 toRaw 傳入的便是這兩個 Map 。
我們可以通過它們，找到任何代理過的數據是否存在，以及通過代理數據找到原始的數據。
除了保存了代理的數據和原始數據，createReactiveObject 函數僅僅是返回了 new Proxy 代理后的對象。 重點在 new Proxy 中傳入的handler參數 baseHandlers。
還記得前面提到的 Proxy 實現數據偵測的細節問題吧，我們嘗試輸入：
let data = { foo: 'foo', ary: [1, 2] } let r = reactive(data) r.ary.push(3) 復制代碼打印結果：
?
?
?
可以看到打印輸出了一次 trigger ...
問題一：如何做到深度的偵測數據的 ？
深度偵測數據是通過 createGetter 函數實現的，前面提到，當對多層級的對象操作時，set 并不能感知到，但是 get 會觸發， 于此同時，利用 Reflect.get() 返回的“多層級對象中內層” ，再對“內層數據”做一次代理。
function createGetter() {return function get(target, key, receiver) {const res = Reflect.get(target, key, receiver)return isObject(res) ? reactive(res) : res} } 復制代碼可以看到這里判斷了 Reflect 返回的數據是否還是對象，如果是對象，則再走一次 proxy ，從而獲得了對對象內部的偵測。
并且，每一次的 proxy 數據，都會保存在 Map 中，訪問時會直接從中查找，從而提高性能。
當我們打印代理后的對象時：
?
?
?
可以看到這個代理后的對象內層并沒有代理的標志，這里僅僅是代理外層對象。
輸出其中一個存儲代理數據的 rawToReactive ：
?
?
?
對于內層 ary: [1, 2] 的代理，已經被存儲在了 rawToReactive 中。
由此實現了深度的數據偵測。
問題二：如何避免多次 trigger ？
function hasOwn(val, key) {const hasOwnProperty = Object.prototype.hasOwnPropertyreturn hasOwnProperty.call(val, key) } function set(target, key, val, receiver) {console.log(target, key, val)const hadKey = hasOwn(target, key)const oldValue = target[key]val = reactiveToRaw.get(val) || valconst result = Reflect.set(target, key, val, receiver)if (!hadKey) {console.log('trigger ... is a add OperationType')} else if(val !== oldValue) {console.log('trigger ... is a set OperationType')}return result } 復制代碼關于多次 trigger 的問題，vue 處理得很巧妙。
在 set 函數中 hasOwn 前打印 console.log(target, key, val) 。
輸入：
let data = ['a', 'b'] let r = reactive(data) r.push('c') 復制代碼輸出結果：
?
?
?
r.push('c') 會觸發 set 執行兩次，一次是值本身 'c' ，一次是 length 屬性設置。
設置值 'c' 時，傳入的新增索引 key 為 2，target 是原始的代理對象 ['a', 'c'] ，hasOwn(target, key) 顯然返回 false ，這是一個新增的操作，此時可以執行 trigger ... is a add OperationType 。
當傳入 key 為 length 時，hasOwn(target, key) ，length 是自身屬性，返回 true，此時判斷 val !== oldValue , val 是 3, 而 oldValue 即為 target['length'] 也是 3，此時不執行 trigger 輸出語句。
所以通過 判斷 key 是否為 target 自身屬性，以及設置val是否跟target[key]相等 可以確定 trigger 的類型，并且避免多余的 trigger。
總結
實際上本文主要集中講解 Vue3 中是如何使用 Proxy 來偵測數據的。 而在分析源碼之前，需要講清楚 Proxy 本身的一些特性，所以講了很多 Proxy 的前置知識。同時，我們也通過自己的方式來解決這些問題。
最后，我們對比了 Vue3 中， 是如何處理這些細節的。可以看出，Vue3 并非簡單的通過 Proxy 來遞歸偵測數據， 而是通過 get 操作來實現內部數據的代理，并且結合 WeakMap 來對數據保存，這將大大提高響應式數據的性能。
有興趣的小伙伴可以針對 遞歸Proxy 和 這種Vue3的這種實現方式做相應的 benchmark ， 這兩者的性能差距比較大。
文章還是對 reactive 做了很大程度的簡化，實際上要處理的細節要復雜得多。 更多的細節還是需要查看源碼獲得。
?
總結
以上是生活随笔為你收集整理的Vue3.0 中的数据侦测的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安卓Android公交查询系统app资源
- 下一篇： 贴纸UI效果如何制作，4个做贴纸效果的小