面试题：什么是 Vue 的 Object.defineProperty？

Object.defineProperty 是 JavaScript 中的一个原生方法，用于直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。在 Vue 2 中，Object.defineProperty 是实现响应式数据的核心机制。

1. `Object.defineProperty` 的基本用法

Object.defineProperty 的语法如下：

Object.defineProperty(obj, prop, descriptor);

obj: 要在其上定义属性的对象。
prop: 要定义或修改的属性的名称。
descriptor: 属性的描述符，包含以下可选键值：
- value: 属性的值。
- writable: 是否可写（默认为 false）。
- enumerable: 是否可枚举（默认为 false）。
- configurable: 是否可配置（默认为 false）。
- get: 属性的 getter 函数。
- set: 属性的 setter 函数。

示例：

const obj = {};

Object.defineProperty(obj, 'name', {
  value: 'Alice',
  writable: true,
  enumerable: true,
  configurable: true,
});

console.log(obj.name); // 输出: Alice

2. Vue 2 中的 `Object.defineProperty`

在 Vue 2 中，Object.defineProperty 被用来实现数据的响应式。Vue 通过递归遍历 data 对象的所有属性，并使用 Object.defineProperty 将它们转换为 getter 和 setter，从而实现对数据的监听。

（1）响应式原理

当访问属性时，触发 getter，Vue 会收集依赖（即当前正在计算的 Watcher）。
当修改属性时，触发 setter，Vue 会通知所有依赖进行更新。

（2）实现示例

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      console.log(`获取 ${key}: ${val}`);
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      console.log(`设置 ${key}: ${newVal}`);
      val = newVal;
    },
  });
}

const data = {};
defineReactive(data, 'name', 'Alice');

console.log(data.name); // 输出: 获取 name: Alice
data.name = 'Bob';      // 输出: 设置 name: Bob

3. `Object.defineProperty` 的局限性

虽然 Object.defineProperty 是 Vue 2 响应式系统的核心，但它也有一些局限性：

（1）无法监听新增或删除的属性

Object.defineProperty 只能监听已经存在的属性，无法监听对象新增或删除的属性。
这也是为什么 Vue 2 中需要使用 Vue.set 或 Vue.delete 来动态添加或删除响应式属性。

（2）无法监听数组的变化

Object.defineProperty 无法直接监听数组的变化（如 push、pop、splice 等）。
Vue 2 通过重写数组的变异方法（如 push、pop 等）来实现对数组的监听。

（3）性能问题

对于深层嵌套的对象，Vue 需要递归遍历所有属性并将其转换为响应式，这可能会导致性能问题。

4. Vue 3 的改进：`Proxy`

为了解决 Object.defineProperty 的局限性，Vue 3 使用了 Proxy 来实现响应式系统。Proxy 可以监听整个对象，包括新增和删除的属性，同时也支持对数组的监听。

`Proxy` 示例：

const data = { name: 'Alice' };

const proxy = new Proxy(data, {
  get(target, key) {
    console.log(`获取 ${key}: ${target[key]}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`设置 ${key}: ${value}`);
    target[key] = value;
    return true;
  },
});

console.log(proxy.name); // 输出: 获取 name: Alice
proxy.name = 'Bob';      // 输出: 设置 name: Bob