vue数据代理底层实现

Vue 数据代理的底层实现原理

Vue 的数据代理机制通过 Object.defineProperty 或 Proxy（Vue 3）实现，将数据对象的属性代理到 Vue 实例上，使得开发者可以直接通过 this.xxx 访问数据。

核心实现步骤

基于 Object.defineProperty（Vue 2）

1. 遍历数据对象的属性，通过 Object.defineProperty 为每个属性添加 getter 和 setter。
2. getter 中返回实际数据对象的属性值，setter 中更新数据并触发依赖更新。

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      // 触发视图更新
    }
  });
}

基于 Proxy（Vue 3）

1. 使用 Proxy 代理整个数据对象，拦截属性的读取和设置操作。
2. 在 get 拦截器中返回属性值，在 set 拦截器中更新数据并触发依赖。

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      // 触发视图更新
      return true;
    }
  });
};

代理到 Vue 实例

1. 在 Vue 初始化时，遍历 data 选项的属性，将每个属性代理到 Vue 实例上。
2. 通过 Object.defineProperty 或 Proxy 实现代理，使得访问 this.xxx 时实际访问的是 this._data.xxx。

function proxy(vm, sourceKey, key) {
  Object.defineProperty(vm, key, {
    get() {
      return vm[sourceKey][key];
    },
    set(newVal) {
      vm[sourceKey][key] = newVal;
    }
  });
}

响应式系统的结合

1. 数据代理与响应式系统结合，在 getter 中收集依赖，在 setter 中触发更新。
2. 通过观察者模式实现数据变化时自动更新视图。

Vue 的数据代理机制简化了开发者的操作，同时为响应式系统提供了基础支持。