当前位置：首页 > VUE

vue observer实现

2026-01-07 20:12:38VUE

Vue Observer 实现原理

Vue 的响应式系统核心是通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现的 Observer 模式。以下是关键实现细节：

数据劫持（Vue 2）

通过 Object.defineProperty 递归地将对象的属性转换为 getter/setter：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      console.log(`读取 ${key}`);
      return val;
    },
    set(newVal) {
      if (val === newVal) return;
      console.log(`更新 ${key}`);
      val = newVal;
    }
  });
}

依赖收集与触发

依赖收集：在 getter 中通过 Dep 类收集依赖（Watcher）：

class Dep {
constructor() {
 this.subscribers = [];
}
depend() {
 if (target && !this.subscribers.includes(target)) {
   this.subscribers.push(target);
 }
}
notify() {
 this.subscribers.forEach(sub => sub());
}
}

触发更新：在 setter 中通知依赖更新：

set(newVal) {
if (val === newVal) return;
val = newVal;
dep.notify(); // 触发所有依赖的 Watcher
}

数组响应式处理（Vue 2）

重写数组的变异方法（如 push/pop）：

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop'].forEach(method => {
  const original = arrayProto[method];
  arrayMethods[method] = function(...args) {
    const result = original.apply(this, args);
    dep.notify(); // 手动触发更新
    return result;
  };
});

Proxy 实现（Vue 3）

使用 Proxy 替代 Object.defineProperty：

vue observer实现

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      Reflect.set(target, key, value);
      trigger(target, key); // 触发更新
    }
  });
}