Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)3

更新時間：2017年01月11日 09:24:35 作者：猴子

這篇文章主要為大家詳細介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)，教大家如何在某個對象中，新增某個屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、前言

在"模擬Vue之數(shù)據(jù)驅(qū)動2"中，我們實現(xiàn)了個Observer構(gòu)造函數(shù)，通過它可以達到監(jiān)聽已有數(shù)據(jù)data中的所有屬性。

但，倘若我們想在某個對象中，新增某個屬性呢？

如下：

那么豈不是，新增的infor屬性，以及它的對象屬性，沒有得到監(jiān)聽。

此時，應(yīng)該怎么處理呢？

通過走讀Vue源碼，發(fā)現(xiàn)他是采用另增屬性方法$set實現(xiàn)的。

就是說，如果我們采用常規(guī)方法為對象增加屬性（如上），我們沒法得知并監(jiān)控它，所以，我們?yōu)槊總€對象擴展一個$set方法，用于另增屬性使用，即可，如下：

data.user.$set('infor', {msg: 'happy'});

好了，下面，我們就一同實現(xiàn)這個$set方法吧。

二、$set方法實現(xiàn)

首先，我們得創(chuàng)建一個恒定extendObj對象，用于將$set方法綁定在其中。

你可能會想，為什么我們需要一個extendObj對象呢？直接將$set函數(shù)賦值給每個需要監(jiān)聽的對象不就完了么？

是的，這樣也可以，但是隨著需求增長，倘若我們又想為每個監(jiān)聽對象擴展其他方法呢？難道又要去Observer里面為對象，一一賦值？

so，創(chuàng)建恒定extendObj對象，如下：

const extendObj = {};

因為，我們將$set綁定到extendObj中，且讓$set為不可枚舉型，所以會用到Object.defineProperty，固將其提取出來，作為一個方法如下：

function proxyObject(obj, key, val, enume){
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enume,
    writable: true,
    configurable: true
  });  
};

接下來，就是實現(xiàn)$set方法了，整體結(jié)構(gòu)如下：

proxyObject(extendObj, '$set', function(key, val){
  //this指向extendObj
  if(this.hasOwnProperty(key)){
    return;
  }else{
    /*
     TODO:在extendObj中監(jiān)聽key屬性，
     且，若key屬性值為對象，再次監(jiān)聽key屬性值
    */     
  }  
});

看到上面的TODO注釋，是否似曾相識，不就是是在“模擬Vue之數(shù)據(jù)驅(qū)動2”遇見過的嘛，通過Observer.prototype.convert監(jiān)聽key屬性，通過new Observer再次監(jiān)聽key屬性值不就完啦。

的確，但是一旦這樣做了，不就和上面我們提到的“直接將$set賦予監(jiān)聽對象”問題一樣嘛，耦合性太大，且隨著需求上漲，不易維護。

固而，在此需要一點小技巧：在observer模塊中為每個監(jiān)聽對象賦予一個$Observer屬性，其值指向Observer自身實例，如下：

//observer.js
p.walk = function(data){
  let keys = Object.keys(data);
  keys.forEach( key => {
    let val = data[key];
    if(typeof val === 'object'){
      new Observer(val);
    }
    this.convert(key, val);
  });
  //$Observer屬性指向Observer自身實例
  data.$Observer = this;
}
//新增一個observe方法
p.observe = function(data){
  if(typeof data === 'object'){
    new Observer(data);  
  }  
}

好了，這樣之后，得$set整體實現(xiàn)如下：

proxyObject(extendObj, '$set', function(key, val){
  if(this.hasOwnProperty(key)){
    return;
  }else{
    proxyObject(this, key, val, true);
    let ob = this.$Observer;
    ob.observe(val);
    ob.convert(key, val);  
  }  
});

到此，一個簡單的$set方法構(gòu)建完畢。

在上面我們提到，之所以需要一個恒定extendObj對象，是為了更好的代碼管理。且，到目前為止，需要監(jiān)聽的對象上并沒有擴展$set方法呢，所以，下面的事情就是為了達到以上效果，如下：

//observer.js
function Observer(data){
  if(!(this instanceof Observer)){
    return new Observer(data);
  }
  //將監(jiān)聽對象的隱指針指向我們的extendObj對象
  data.__proto__ = extendObj;
  this.data = data;
  this.walk(data);  
}

好了，一切完畢，接下來就測試下吧：

<script src="./extendObj.js"></script>
<script src="./observer.js"></script>
<script>
  let data = {
    user: {
      name: 'Monkey',
      age: 24
    },
    lover: {
      name: 'Dorie',
      age: 23
    }
  };
  Observer(data);
</script>

效果如下：