function observe(obj) {
  // 判断类型
  if (!obj || typeof obj !== 'object') {
    return;
  }
  // 重写数组
  //  if(Array.isArray(target)){
  //       target.__proto__ = arrProto
  //   }
  Object.keys(obj).forEach((key) => {
    defineReactive(obj, key, obj[key]);
  });
}
export function defineReactive(obj, key, val) {
  var dep = new Dep();
  var childOb = observe(val);

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      // 说明这是watch 引起的
      if (Dep.target) {
        dep.addSub(Dep.target);
      }
      return val;
    },
    set: (newVal) => {
      var value = val;
      if (newVal === value) {
        return;
      }
      val = newVal;
      childOb = observe(newVal);  // 最好再遍历一下新设置的值
      dep.notify(); // 更新DOM ☆☆☆☆☆
    },
  });
}

export default class Dep {
  constructor() {
    this.subs = []; //这个就是监听队列的数组
  }
  addSub(sub) {
    this.subs.push(sub); //将要监听的属性放进去
  }
  notify() {
    this.subs.forEach((sub) => sub.update()); //在属性的set方法里会触发notify方法，进行遍历这些被监听或变化了的属性，进行dom更新
  }
}

export default class Watcher {
  constructor(obj, key, cb) {
    // 将 Dep.target 指向自己
    // 然后触发属性的 getter 添加监听
    // 最后将 Dep.target 置空
    Dep.target = this;
    this.cb = cb;
    this.obj = obj;
    this.key = key;
    this.value = obj[key]; // 主要是这里  会触发getter  把this添加到dp中通过dp.addSub(Dep.target)
    Dep.target = null;
  }
  update() {
    // 获得新值
    this.value = this.obj[this.key];
    // 调用 update 方法更新 Dom
    this.cb(this.value);
  }
}

var watchers = (vm._computedWatchers = Object.create(null));

watchers = Object.assign(watchers, {
  key1: new Watcher({ getter: computed[key1].get }),
  key2: new Watcher({ getter: computed[key2].get }),
});

var data= {
  key1:createComputedGetter(key1)
  key2:createComputedGetter(key2)
}

defineComputed(vm, key);
function defineComputed(target, key){
  // 修改getter
  Object.defineProperty(target, key, createComputedGetter(key));
}
// 重定义的getter函数
function createComputedGetter(key) {
  return function computedGetter() {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) { // 为false走缓存
        // true，懒执行
        watcher.evaluate(); // 执行watcher方法后设置dirty为false
        // set触发notify 后会再重置为true
      }
      if (Dep.target) {
        watcher.depend();
      }
      return watcher.value; //返回观察者的value值
    }
  };
}

Watcher.prototype.update = function update() {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true;
  } else if (this.sync) {
    this.run();
  } else {
    queueWatcher(this);
  }
};

function evaluate() {
  if (this.dirty) {
    this.value = this.get(); // get直接求值
    this.dirty = false;
  }
  return this.value;
}

class Store {
  constructor(options) {
    /*-------------------------------state原理-------------------------------------------*/
    //给每个组件的$store上挂一个state，让每个组件都可以用  this.$store.state
    this.state = options.state;

    //在state上面传入一个name:'Fan'打印一下
    // console.log(this.state);    //打印结果  {name: "Fan"}
    /*------------------------------------------------------------------------------*/
  }
}
//混入
Vue.mixin({
  beforeCreate() {
    //保证每一个组件都能得到仓库
    //判断如果是main.js的话，就把$store挂到上面
    if (this.$options && this.$options.store) {
      this.$store = this.$options.store;
    } else {
      //如果不是根组件的话，也把$store挂到上面,因为是树状组件，所以用这种方式
      this.$store = this.$parent && this.$parent.$store;

      //在App.vue上的mounted({console.log(this.$store)})钩子中测试，可以得到store ---> Store {}
    }
  },
});