当前位置：首页 > VUE

vue响应式怎么实现

2026-01-20 19:15:11VUE

Vue 响应式实现原理

Vue 的响应式系统通过 数据劫持 和 依赖收集 实现，核心基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）。以下是具体实现机制：

数据劫持

Vue 2 使用 Object.defineProperty 拦截对象的属性访问和修改，Vue 3 改用 Proxy 代理整个对象，覆盖更多操作（如数组方法、新增属性）。

Vue 2 示例：

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

Vue 3 示例：

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key) {
      console.log(`读取 ${key}`);
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      console.log(`更新 ${key}`);
      return Reflect.set(target, key, value);
    }
  });
};

依赖收集与派发更新

依赖收集：在属性被访问时（getter），将当前执行的组件渲染函数或计算属性作为依赖存入“订阅者列表”。
派发更新：属性被修改时（setter），通知所有订阅者重新执行（如触发组件重新渲染）。

简化实现：

class Dep {
  constructor() {
    this.subscribers = new Set();
  }
  depend() {
    if (activeEffect) this.subscribers.add(activeEffect);
  }
  notify() {
    this.subscribers.forEach(effect => effect());
  }
}

let activeEffect = null;
function watchEffect(effect) {
  activeEffect = effect;
  effect(); // 首次执行触发依赖收集
  activeEffect = null;
}

数组响应式处理

Vue 2 通过重写数组的变异方法（如 push、pop）实现响应式，本质是拦截方法调用后手动触发更新。

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift'].forEach(method => {
  const original = arrayProto[method];
  arrayMethods[method] = function(...args) {
    const result = original.apply(this, args);
    console.log(`数组方法 ${method} 被调用`);
    dep.notify(); // 触发更新
    return result;
  };
});