• 源数据

const object2 = {
  name: "张三",
  age: 20,
};

• 包装源数据的方法

function observable(object) {
  return new Proxy(object, {
    get(object, key) {
      console.log(`你访问了${key}`);
      return Reflect.get(object, key);
    },
    set(object, key, value) {
      const result = Reflect.set(object, key, value);
      // 触发更新
      for (const observer of queuedObservers) {
        observer();
      }
      return result;
    },
  });
}

• 包装数据

// 数据监听
const person = observable(object2);

• 收集依赖，哪里在使用这个数据

const queuedObservers = new Set();

const observe = (callback) => {
  queuedObservers.add(callback);
};

//这里就是依赖
function print() {
  console.log(`${person.name}今年${person.age}岁`);
}
// 收集依赖
observe(print);

• 改变数据，触发更新即可

person.age= 400