以下是使用 ES6 class 语法实现的 Vue2 (Object.defineProperty) 和 Vue3 (Proxy) 响应式系统核心逻辑的示例代码：

一、Vue2 风格：基于 Object.defineProperty

class Vue2Reactive {
  constructor(data) {
    this.data = data;
    this.walk(data);
  }

  // 递归遍历对象属性
  walk(obj) {
    if (typeof obj !== 'object' || obj === null) return;

    Object.keys(obj).forEach(key => {
      this.defineReactive(obj, key, obj[key]);
      this.walk(obj[key]); // 递归处理嵌套对象
    });

    // 处理数组监听
    if (Array.isArray(obj)) {
      this.overrideArrayMethods(obj);
    }
  }

  // 定义响应式属性
  defineReactive(obj, key, value) {
    const dep = new Dep(); // 模拟依赖收集器

    Object.defineProperty(obj, key, {
      get: () => {
        dep.depend(); // 收集依赖
        return value;
      },
      set: newVal => {
        if (value === newVal) return;
        value = newVal;
        this.walk(newVal); // 对新值进行响应式处理
        dep.notify(); // 触发更新
      }
    });
  }

  // 重写数组方法
  overrideArrayMethods(arr) {
    const arrayProto = Array.prototype;
    const methods = ['push', 'pop', 'shift', 'unshift'];
    const arrayMethods = Object.create(arrayProto);

    methods.forEach(method => {
      const original = arrayProto[method];
      Object.defineProperty(arrayMethods, method, {
        value: (...args) => {
          const result = original.apply(arr, args);
          console.log(`数组被修改: ${method}`);
          this.walk(arr); // 重新遍历数组元素
          return result;
        }
      });
    });

    arr.__proto__ = arrayMethods;
  }
}

// 使用示例
const data = { 
  count: 0,
  list: [1, 2, 3],
  nested: { a: 1 }
};

const reactiveData = new Vue2Reactive(data);

data.count = 5; // 触发 setter
data.list.push(4); // 输出 "数组被修改: push"
data.newProp = 'test'; // 不会被监听（需使用 Vue.set）

二、Vue3 风格：基于 Proxy

class Vue3Reactive {
  constructor(data) {
    return this.createProxy(data);
  }

  createProxy(target) {
    const dep = new Dep(); // 模拟依赖收集器

    const handler = {
      get: (target, key, receiver) => {
        dep.depend(); // 收集依赖
        const value = Reflect.get(target, key, receiver);
        // 递归代理嵌套对象
        return typeof value === 'object' && value !== null 
          ? this.createProxy(value) 
          : value;
      },

      set: (target, key, value, receiver) => {
        if (target[key] === value) return true;
        const result = Reflect.set(target, key, value, receiver);
        dep.notify(); // 触发更新
        return result;
      },

      deleteProperty: (target, key) => {
        const result = Reflect.deleteProperty(target, key);
        dep.notify();
        return result;
      }
    };

    return new Proxy(target, handler);
  }
}

// 使用示例
const data = {
  count: 0,
  list: [1, 2, 3],
  nested: { a: 1 }
};

const reactiveData = new Vue3Reactive(data);

reactiveData.count = 5; // 触发更新
reactiveData.list.push(4); // 自动监听数组操作
reactiveData.newProp = 'test'; // 自动监听新增属性
delete reactiveData.nested.a; // 触发删除监听

四、实现要点说明

1. 依赖收集
   两个类都使用简化的 Dep 类（未完整实现）模拟依赖收集，实际Vue中使用的是更复杂的依赖追踪系统。
2. 递归处理
3. Vue2 在初始化时递归遍历所有属性
4. Vue3 仅在访问属性时动态创建嵌套代理
5. 性能优化
   Proxy 方案避免了初始化时的全量递归，对大型对象性能更优。

五、扩展建议

1. 添加 Dep 类的完整实现：

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;
}

2.实际使用：

const data = new Vue3Reactive({ count: 0 });

watchEffect(() => {
  console.log(`Count changed: ${data.count}`);
});

data.count++; // 输出 "Count changed: 1"