mini-observer

最新推荐文章于 2025-12-29 14:18:29 发布

原创最新推荐文章于 2025-12-29 14:18:29 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了MVVM模式下数据响应式原理，通过自定义Dep类管理观察者，利用Object.defineProperty实现属性的get和set拦截，达到数据变化自动更新视图的效果。并通过observe函数遍历对象属性，实现属性的监听。

// 定义一个Dep类，里边有一个subscribers用来存放activeUpdate即wrappedUpdate这个函数
class Dep {
  constructor () {
    this.subscribers = new Set();
  }
  // 每次depend都会将activeUpdate中保存的函数放入subscribers集合中
  depend() {
    if (activeUpdate) {
      this.subscribers.add(activeUpdate);
    }
  }
  // 每次notify都会遍历subscribers中函数并执行
  notify() {
    this.subscribers.forEach(sub => sub());
  }
}
function observe(obj) {
  Object.keys(obj).forEach(key => {
    // internalValue中存放着对象obj中每个键对应的值
    let internalValue = obj[key];
    const dep = new Dep();
    Object.defineProperty(obj, key, {
      // 当操作obj中获取key的值时，会将activeUpdate添加到Dep类的subscribers集合中
      get () {
        dep.depend();
        return internalValue;
      },
      set (newVal) {
        // 如果新的值和旧的值不想等时，会遍历执行集合中的函数，当obj中字段的值发生改变时，会执行存放到集合中的函数，即执行autorun中传入的函数
        if(newVal !== internalValue) {
          internalValue = newVal;
          dep.notify();
        }
      }
    })
  })
  return obj;
}
// 要实现一个autorun函数，函数传入update参数，update参数为一个函数
// 定义一个变量activeUpdate为空，用来存放autorun里边的wrappedUpdate函数
// wrappedUpdate中会执行update函数，即每一次执行wrappedUpdate函数都会执行update函数
let activeUpdate = null;
function autorun(update) {
  const wrappedUpdate = () => {
    activeUpdate = wrappedUpdate;
    update();
    activeUpdate = null;
  }
  wrappedUpdate();
}


//做一个迷你的oberser，即要实现改变对象中的数据，能自动打印出来；完成如下实例。
const state = {
  count: 0
};
observe(state);
autorun(() => {
  console.log(state.count);
})
state.count++; // 当count改变时，autorun中内容会自动改变