面试题：使用 Object.defineProperty 来进行数据劫持有什么缺点？

Object.defineProperty 是 Vue 2.x 中实现响应式系统的核心方法，但它也存在一些缺点和局限性。以下是使用 Object.defineProperty 进行数据劫持的主要缺点：

1. 无法监听数组的变化

Object.defineProperty 无法直接监听数组的变化（如 push、pop、splice 等操作）。

原因

Object.defineProperty 只能劫持对象的属性，而数组的操作（如 push、pop）不会触发属性的 setter。

解决方案

Vue 2.x 通过重写数组的原型方法（如 push、pop）来实现对数组变化的监听。

示例

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

['push', 'pop', 'splice'].forEach(method => {
  const original = arrayProto[method];
  Object.defineProperty(arrayMethods, method, {
    value: function(...args) {
      const result = original.apply(this, args);
      console.log(`数组变化: ${method}`);
      return result;
    }
  });
});

const arr = [];
arr.__proto__ = arrayMethods;

arr.push(1); // 输出: 数组变化: push

2. 无法监听属性的添加或删除

Object.defineProperty 只能劫持已经存在的属性，无法监听对象属性的添加或删除。

示例

const obj = {};

Object.defineProperty(obj, 'a', {
  get() {
    console.log('获取 a');
    return this._a;
  },
  set(val) {
    console.log('设置 a');
    this._a = val;
  }
});

obj.a = 1; // 输出: 设置 a
console.log(obj.a); // 输出: 获取 a

obj.b = 2; // 无法监听
delete obj.a; // 无法监听

解决方案

Vue 2.x 提供了 Vue.set 和 Vue.delete 方法来监听属性的添加和删除。

示例

this.$set(this.obj, 'b', 2); // 添加属性
this.$delete(this.obj, 'a'); // 删除属性

3. 性能问题

Object.defineProperty 需要对对象的每个属性进行递归劫持，这在对象属性较多时会导致性能问题。

原因

每次递归劫持都会创建闭包，占用内存。
初始化时需要遍历对象的所有属性，时间复杂度较高。

解决方案

Vue 3.x 使用 Proxy 替代 Object.defineProperty，Proxy 可以一次性劫持整个对象，性能更好。

4. 无法监听嵌套对象的变化

Object.defineProperty 只能劫持当前对象的属性，无法自动劫持嵌套对象的属性。

示例

const obj = {
  a: {
    b: 1
  }
};

Object.defineProperty(obj, 'a', {
  get() {
    console.log('获取 a');
    return this._a;
  },
  set(val) {
    console.log('设置 a');
    this._a = val;
  }
});

obj.a.b = 2; // 无法监听

解决方案

Vue 2.x 通过递归劫持嵌套对象的属性来实现监听。

示例

function defineReactive(obj, key, val) {
  if (typeof val === 'object') {
    observe(val); // 递归劫持嵌套对象
  }
  Object.defineProperty(obj, key, {
    get() {
      console.log(`获取 ${key}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`设置 ${key}`);
        val = newVal;
      }
    }
  });
}

function observe(obj) {
  if (typeof obj !== 'object' || obj === null) return;
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key]);
  });
}

const obj = { a: { b: 1 } };
observe(obj);

obj.a.b = 2; // 输出: 获取 a