引言

在前端开发领域，Vue.js 的响应式系统一直是面试中的高频考点。其中，Object.defineProperty 和 Proxy 是两个核心概念。本文将深入探讨这两个方法的底层原理及其在 Vue2 和 Vue3 中的不同应用，帮助读者更好地理解 Vue3 的响应式系统。

Object.defineProperty：Vue2 的核心

Object.defineProperty 是 ES5 提供的一种定义对象属性的方法，通过它可以实现对对象属性的拦截和自定义操作。在 Vue2 中，Object.defineProperty 被广泛应用于数据的响应式转换。

实现原理

首先，我们创建一个简单的对象，并尝试修改其属性值以触发视图更新：

function updateView(fn) {
  console.log('视图更新');
}

let data = { name: '牢大', age: 18, like: ['吃饭', '睡觉'] };
data.age = 19; // 视图更新应该在这里触发

由于 Object.defineProperty 只能劫持对象的第一层属性，因此我们需要一个观察者来监控对象的行为：

function observer(target) {
  if (typeof target !== 'object' || target == null) {
    return target;
  }
  for (let key in target) {
    defineReactive(target, key, target[key]);
  }
}

function defineReactive(target, key, value) {
  Object.defineProperty(target, key, {
    get() {
      return value;
    },
    set(newVal) {
      value = newVal;
      updateView();
    }
  });
}

通过这种方式，我们可以实现对对象属性的响应式转换。但是，这种方法的局限性也很明显，它无法劫持嵌套对象和数组。

Proxy：Vue3 的革新

Vue3 引入了 Proxy 对象，提供了一种更强大、更灵活的响应式系统。与 Object.defineProperty 不同，Proxy 可以拦截整个对象的所有操作，包括新增属性和访问方式。

实现原理

我们再次创建一个简单的对象，并尝试修改其属性值以触发视图更新：

function reactive(target) {
  return createReactiveObject(target);
}

function updateView(fn) {
  console.log('视图更新');
}

let data = { name: 'awei', age: 18, like: ['吃饭', '睡觉'] };
let newData = reactive(data);
newData.name = 'jack'; // 视图更新应该在这里触发

Proxy 的优势在于它可以自动劫持嵌套对象和数组，无需手动进行递归操作。此外，Proxy 还支持更多的拦截操作，如删除属性、检测存在性等。

代码示例

function createReactiveObject(target) {
  if (!isObject(target)) {
    return target;
  }
  let baseHandler = {
    get(target, key, receiver) {
      console.log('读取值');
      let result = Reflect.get(target, key, receiver);
      return isObject(result) ? reactive(result) : result;
    },
    set(target, key, value, receiver) {
      console.log('修改值');
      let res = Reflect.set(target, key, value, receiver);
      updateView();
      return res;
    },
    // ... 其他拦截器
  };
  return new Proxy(target, baseHandler);
}

function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

通过这种方式，我们可以实现对对象属性的响应式转换，同时支持嵌套对象和数组。

总结

Object.defineProperty 和 Proxy 都是实现数据响应式的有效方法，但它们各有优缺点。Object.defineProperty 更适合简单的场景，而 Proxy 则提供了更强大的功能和更好的性能。在 Vue3 中，Proxy 成为了实现响应式系统的核心。

希望本文能帮助读者更好地理解 Object.defineProperty 和 Proxy 的底层原理及其在 Vue.js 中的应用。