深刻淺出vue原理(2、數據劫持Observe和數據代理)

vue原理系列

vue原理一

vue原理二

vue原理三

vue原理四

new的時候傳入參數 el掛載節點，遍歷data上屬性並劫持

function Vue(options) {
    //將全部屬性掛載在$options上
    this.$options = options; 
    //緩存data
    var data = (this._data = this.$options.data);
    //劫持data
    observe(data);
    //data劫持完而後代理給實例vm
    for (let key in data) {
      Object.defineProperty(this, key, {
        numerable: true,
        get() {
          return this._data[key];
        },
        set(newVal) {
          this._data[key] = newVal;
        }
      });
    }
  }

  //觀察對象給對象增長Object.defineProperty
  function Observe(data) {
    for (let key in data) {
      // debugger;
      let val = data[key];
      // 這邊對值進行再劫持
      observe(val);
      //data:{a:1}  => 換Object.defineProperty形式寫入data
      Object.defineProperty(data, key, {
        enumerable: true,
        get() {
          return val;
        },
        set(newVal) {
          if (val === newVal) {
            return;
          }
          val = newVal;
          賦值對象再次劫持數據
          observe(newVal);
        }
      });
    }
  }
  
  function observe(data) {
    return new Observe(data);
  }
  
  var vm = new Vue({
    data: {
      a: { a: 1 }
    }
  });
  // vm._data.a= 2;
  console.log(vm._data.a);
複製代碼

遞歸data而後每層數據劫持設置get set

Object.defineProperty(data,key,config)
複製代碼

在Vue構造函數內把數據劫持在this上 實現數據代理 this.XXX Object.defineProperty(this,key,config)

vue特色不能新增不存在的屬性，由於沒有數據劫持 能夠經過$set()加上