日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章主要介紹Proxy如何優(yōu)化vue的數(shù)據(jù)監(jiān)聽機制問題，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)主營藤縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),藤縣h5微信平臺小程序開發(fā)搭建,藤縣網(wǎng)站營銷推廣歡迎藤縣等地區(qū)企業(yè)咨詢

vue2.x中的實現(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和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的實現(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的方法是添加一個依賴類：Dep

class Watcher{
  constructor(data, key, cb){
    this.cb = cb;
    Dep.target = this; //每次新建watcher的時候講給target賦值，對target的管理這里簡化了vue的實現(xiàn)
    data[key];//調(diào)用getter，執(zhí)行addSub, 將target傳入對應(yīng)的dep; vue的實現(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(); //每一個屬性都有一個對應(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之所以要從新實現(xiàn)，主要有這幾個原因：

1. Object.defineProperty的性能開銷。

2. defineReactive一開始就要對要監(jiān)聽的對象所有屬性都執(zhí)行一遍，因為傳統(tǒng)方法要將一個對象轉(zhuǎn)換成可監(jiān)聽對象，只能如此。

3. 添加刪除屬性的問題。

4. 還有一點就是這個模塊被耦合到了vue里面，新版本可以單獨作為一個庫來使用。

然后我們來看看同樣的功能采用Proxy會怎樣實現(xiàn)。

Proxy的實現(xiàn)

將一個對象轉(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，其他時間target都是null

以上是“Proxy如何優(yōu)化vue的數(shù)據(jù)監(jiān)聽機制問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前標(biāo)題：Proxy如何優(yōu)化vue的數(shù)據(jù)監(jiān)聽機制問題-創(chuàng)新互聯(lián)
URL分享：http://www.dlmjj.cn/article/cohspi.html