当前位置：首页 > VUE

vue怎么实现数据响应

2026-01-20 18:51:00VUE

Vue 数据响应的实现原理

Vue 的数据响应式系统是通过 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）实现的。核心是监听数据变化并自动更新视图。

Vue 2.x 的实现方式

在 Vue 2.x 中，数据响应式是通过 Object.defineProperty 对对象的属性进行劫持实现的。

// 简化版响应式实现
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`get ${key}: ${val}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`set ${key}: ${newVal}`);
        val = newVal;
        // 触发更新
      }
    }
  });
}

const data = { count: 0 };
defineReactive(data, 'count', data.count);

对于数组，Vue 通过重写数组的变异方法（如 push, pop, shift 等）来实现响应式。

Vue 3.x 的实现方式

Vue 3.x 使用 Proxy 替代 Object.defineProperty，提供了更好的性能和更全面的数据监听能力。

// 简化版 Proxy 实现
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log(`get ${key}`);
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      console.log(`set ${key}: ${value}`);
      Reflect.set(target, key, value);
      // 触发更新
      return true;
    }
  });
}

const data = reactive({ count: 0 });

响应式系统的核心组件

Observer：遍历对象的每个属性，将其转换为 getter/setter 形式。
Dep：每个属性都有一个 Dep 实例，用于收集依赖（Watcher）。
Watcher：代表一个依赖，当数据变化时通知 Watcher 更新。

实现数据响应的步骤

初始化数据：将数据对象传入响应式系统进行初始化。
依赖收集：在渲染过程中，访问数据属性时会触发 getter，收集当前 Watcher 作为依赖。
派发更新：当数据变化时，触发 setter，通知所有依赖的 Watcher 进行更新。

数组的特殊处理

由于 Object.defineProperty 无法直接监听数组变化，Vue 通过以下方式实现数组响应式：

// 重写数组方法
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  const original = arrayProto[method];
  arrayMethods[method] = function(...args) {
    const result = original.apply(this, args);
    // 通知更新
    return result;
  };
});