模拟mvvm模式

function update() {
  console.log('update view')
}

// let obj = {
//   name: {
//     n: 1
//   }
// }


let arr = [1, 2, 3];


let oldProto = Array.prototype; //获取数组原有方法
let proto = Object.create(oldProto); // 复制一份,避免影响正常数组操作

['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'].forEach(item => {
  proto[item] = function () { //修改拷贝后的数组方法
    update();
    oldProto[item].apply(this, arguments);
  }
})

function observer(value) {
  if (Array.isArray(value)) {
    return value.__proto__ = proto;
  }
  if (typeof value !== 'object') {
    return value;
  }
  for (let key in value) {
    defineReactive(value, key, value[key]);
  }
}

function defineReactive(obj, key, value) {
  observer(value); //（1）如果value为一个对象时，需要继续增加getter setter
  Object.defineProperty(obj, key, {
    get() {
      return value;
    },
    set(newVal) {
      if (newVal !== value) {
        observer(newVal); //（2）
        value = newVal;
        update();
      }
    }
  })
}

// observer(obj);
// obj.name.n = 100; // （1）

// obj.name = {
//   n: 100
// }; // (2) 给obj.name赋了新值： {n: 100} , 该值上也需要增加setter getter
// obj.name.n = 200;


observer(arr);
arr.push(1);