关于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