我們首先來看vue2.x中的實(shí)現(xiàn)，為簡單起見，我們這里不考慮多級嵌套，也不考慮數(shù)組
vue2.x中的實(shí)現(xiàn)
其本質(zhì)是new Watcher(data, key, callback)的方式，而在調(diào)用之前是先將data中的所有屬性轉(zhuǎn)化成可監(jiān)聽的對象, 其主要就是利用Object.defineProperty，。
class Watcher{ constructor(data, key, cb){ }}//轉(zhuǎn)換成可監(jiān)聽對象function observe(data){ new Observer(data)}//修改數(shù)據(jù)的getter和setterfunction defineReactive(obj, key){ let value = obj[key]; Object.defineProperty(obj, key, { enumerable: true, configurable: true, get(){ return value; }, set(newVal){ value = newVal } })}Observer的實(shí)現(xiàn)很簡單
class Observer { constructor(data){ this.walk(data); } walk(data){ for(var key in data) { // 這里不考慮嵌套的問題，否則的話需要遞歸調(diào)用walk defineReactive(data, key) } }}現(xiàn)在怎么將watcher和getter/setter聯(lián)系起來，vue的方法是添加一個(gè)依賴類：Dep
class Watcher{ constructor(data, key, cb){ this.cb = cb; Dep.target = this; //每次新建watcher的時(shí)候講給target賦值，對target的管理這里簡化了vue的實(shí)現(xiàn) data[key];//調(diào)用getter，執(zhí)行addSub, 將target傳入對應(yīng)的dep; vue的實(shí)現(xiàn)本質(zhì)就是如此 }}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(); //每一個(gè)屬性都有一個(gè)對應(yīng)的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之所以要從新實(shí)現(xiàn)，主要有這幾個(gè)原因：
然后我們來看看同樣的功能采用Proxy會怎樣實(shí)現(xiàn)。
Proxy的實(shí)現(xiàn)
將一個(gè)對象轉(zhuǎn)換成Proxy的方式很簡單，只需要作為參數(shù)傳給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;也許一開始我們只關(guān)心x和y，那么就不會對其他的屬性做相應(yīng)的處理，除非添加watcher，其他時(shí)間target都是null
總結(jié)
以上所述是小編給大家介紹的Proxy可以優(yōu)化vue的數(shù)據(jù)監(jiān)聽機(jī)制問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
