关于vue.js:简单实现-vue-观察者-模式-和-双向绑定-coding

var data = {
  name: "fangtangxiansheng",
  job: "fe",
  power: 0
};
console.log(data);
let target = null;

class willObserver {
  watchList = [];
  // 减少观察者
  addWatch() {
    target && (this.watchList =[... new Set([...this.watchList, target])]);
  }
  watchUpdate() {
    this.watchList.forEach((watch) => {
      watch.update();
    });
  }
  // 告诉
  notiy() {
    this.watchUpdate();
  }
}

class Watch {
  constructor(cb) {
    this.cb = cb;
    target = this;
  }
  update() {
    this.cb();
  }
}

const creatWatch = (expCondition, cb) => {
  new Watch(cb);
  expCondition();
};
// 结构 ”数据依赖埋点“
const trasnfromDataToAutoListion = (data) => {
  Object.keys(data).forEach((key) => {
    let cache = data[key];
    let _ob = new willObserver();
    Object.defineProperty(data, key, {
      // 做一下埋点
      set(v) {
        cache = v;
        _ob.notiy();
      },
      // 触发watch 实例更新
      get() {
        _ob.addWatch();
        return cache;
      }
    });
  });
};

trasnfromDataToAutoListion(data);

creatWatch(
  () => {
    console.log("condition", data.name, data.job);
  },
  () => {
    document.querySelector("#html").innerHTML = JSON.stringify(data);
  }
);
document.querySelector("#html").innerHTML = JSON.stringify(data);
setInterval(() => {
  data.power = `${Math.random() * 100}%`;
}, 500);

demo