深刻浅出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()加上