解构赋值-MVVM原理解析1.2_12-27

接着昨天mvvm原理解析1后面的数据并未实现双向绑定看以看到的是

图片.png

我们需要监控数据改变=>数据劫持,我们需要自己定义属性

图片.png

我们需要做到自己定义data上的属性,不得已需要实例化对象,创建类

new Observer(this.$data);

class Observer {
  constructor(data) {
    console.log(data);
  }
}

图片.png

图片.png

constructor(data) {
    console.log(data);
    this.observer(data);
  }
  observer(data) {
    //依次遍历,先判断合法性,如果数据没写是空的就不用监控了
    //if object => observer 如果是对象就观察
    if (data && typeof data == "object") {
      //if object => for
      for (let key in data) {
        this.defineReactive(data, key, data[key]);
        //data数据定义key属性 值是data[key]
      }
    }
  }
  defineReactive(obj, key, value) {
    Object.defineProperty(obj, key, {
      get() {
        //默认get方法取它未来的value
        return value;
      },
      set(newVal) {
        //{school:{name:'imycode'}} school={}
        value = newVal;
      }
    });
  }

以上算是完成了初步操作,但是没有往深挖,只是给school加了一些方法{....}

图片.png

图片.png

解构赋值

//实现数据劫持功能=>解构赋值
class Observer {
  constructor(data) {
    console.log(data);
    this.observer(data);
  }
  observer(data) {
    //依次遍历,先判断合法性,如果数据没写是空的就不用监控了
    //if object => observer 如果是对象就观察
    if (data && typeof data == "object") {
      //if object => for
      for (let key in data) {
        this.defineReactive(data, key, data[key]);
        //data数据定义key属性 值是data[key]
      }
    }
  }
  defineReactive(obj, key, value) {
    this.observer(value);
    Object.defineProperty(obj, key, {
      get() {
        //默认get方法取它未来的value
        return value;
      },
      set: newVal => {
        //{school:{name:'imycode'}} school={}
        if (newVal != value) {
          this.observer(newVal);
          value = newVal;
          //if current time value==newVal 如果
          //当前的老值和新值一样就不要进到这个if里
          //赋值
        }
      }
    });
  }
}