這篇文章主要介紹了淺析Proxy可以優化vue的數據監聽機制問題及實現思路,需要的朋友可以參考下
我們首先來看vue2.x中的實現,爲簡單起見,我們這裏不考慮多級嵌套,也不考慮數組
vue2.x中的實現
其本質是new Watcher(data, key, callback)
的方式,而在調用之前是先將data中的所有屬性轉化成可監聽的對象, 其主要就是利用Object.defineProperty
,。
class Watcher{ constructor(data, key, cb){ } } //轉換成可監聽對象 function observe(data){ new Observer(data) } //修改數據的getter和setter function defineReactive(obj, key){ let value = obj[key]; Object.defineProperty(obj, key, { enumerable: true, configurable: true, get(){ return value; }, set(newVal){ value = newVal } }) }
Observer的實現很簡單
class Observer { constructor(data){ this.walk(data); } walk(data){ for(var key in data) { // 這裏不考慮嵌套的問題,否則的話需要遞歸調用walk defineReactive(data, key) } } }
現在怎麼將watcher和getter/setter聯繫起來,vue的方法是添加一個依賴類:Dep
class Watcher{ constructor(data, key, cb){ this.cb = cb; Dep.target = this; //每次新建watcher的時候講給target賦值,對target的管理這裏簡化了vue的實現 data[key];//調用getter,執行addSub, 將target傳入對應的dep; vue的實現本質就是如此 } } class Dep { constructor(){ this.subs = []; } addSub(sub){ this.subs.push(sub); } notify(){ this.subs.forEach(sub => sub.cb()) } } function defineReactive(obj, key){ let value = obj[key]; let dep = new Dep(); //每一個屬性都有一個對應的dep,作爲閉包保存 Object.defineProperty(obj, key, { enumerable: true, configurable: true, get(){ dep.addSub(Dep.target) Dep.target = null; return value; }, set(newVal){ value = newVal dep.notify(); } }) }
以上就是vue的思路,vue3之所以要從新實現,主要有這幾個原因:
- Object.defineProperty的性能開銷。
- defineReactive一開始就要對要監聽的對象所有屬性都執行一遍,因爲傳統方法要將一個對象轉換成可監聽對象,只能如此。
- 添加刪除屬性的問題。
- 還有一點就是這個模塊被耦合到了vue裏面,新版本可以單獨作爲一個庫來使用。
然後我們來看看同樣的功能採用Proxy會怎樣實現。
Proxy的實現
將一個對象轉換成Proxy的方式很簡單,只需要作爲參數傳給proxy即可;
class Watcher { constructor(proxy, key, cb) { this.cb = cb; Dep.target = this; this.value = proxy[key]; } } class Dep { constructor(){ this.subs = [] } addSub(sub){ this.subs.push(sub); } notify(newVal){ this.subs.forEach(sub => { sub.cb(newVal, sub.value); sub.value = newVal; }) } } const observe = (obj) => { const deps = {}; return new Proxy(obj, { get: function (target, key, receiver) { const dep = (deps[key] = deps[key] || new Dep); Dep.target && dep.addSub(Dep.target) Dep.target = null; return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) { const dep = (deps[key] = deps[key] || new Dep); Promise.resolve().then(() => { dep.notify(value); }) return Reflect.set(target, key, value, receiver); } }); } var state = observe({x:0}) new Watcher(state, 'x', function(n, o){ console.log(n, o) }); new Watcher(state, 'y', function(n, o){ console.log(n, o) }); state.x = 3; state.y = 3;
也許一開始我們只關心x和y,那麼就不會對其他的屬性做相應的處理,除非添加watcher,其他時間target都是null
總結
以上所述是小編給大家介紹的Proxy可以優化vue的數據監聽機制問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持!