当前位置：首页 > news >正文

VUE2与VUE3的底层监听工具对比：Object.defineProperty() (Vue 2) 与 Proxy (Vue 3)

news 来源：原创 2025/5/25 12:51:40

`Object.defineProperty()` 到底是什么？

Object.defineProperty() 是 JavaScript 内置的 API，用来精确控制对象属性的行为，可以：

定义 getter / setter，让属性具备响应式能力
使属性 不可修改、不可枚举、不可删除
拦截对属性的访问和修改

Vue 2 的响应式系统，就是用 Object.defineProperty() 劫持 (Hijack) 数据，让数据变化时可以触发 Watcher 更新 UI。

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

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'Vue',
  writable: false,  // 不可修改
  enumerable: true, // 可被遍历
  configurable: false // 不可删除
});

console.log(obj.name); // Vue
obj.name = 'React'; // ❌ 修改失败 (因为 writable: false)
delete obj.name; // ❌ 删除失败 (因为 configurable: false)

🔹 defineProperty() 参数

Object.defineProperty(对象, '属性名', {
  value: 初始值,  // 设置属性值
  writable: 是否可修改,
  enumerable: 是否可枚举,
  configurable: 是否可删除
});

2. Vue 2 响应式：用 `defineProperty()` 监听数据变化

在 Vue 2 中，每个 data 里的属性都会被 Object.defineProperty() 改造成 getter/setter。

let data = { message: 'Hello Vue' };

Object.defineProperty(data, 'message', {
  get() {
    console.log('获取 message');
    return 'Hello Vue';
  },
  set(newVal) {
    console.log('message 变成:', newVal);
    // 这里可以触发 Vue 更新 UI
  }
});

console.log(data.message); // 触发 getter，输出 "获取 message"
data.message = 'Hello React'; // 触发 setter，输出 "message 变成: Hello React"

🔹 Vue 2 响应式的核心：

访问属性时 (get)，可以 收集依赖（订阅 Watcher）
修改属性时 (set)，可以 触发更新（通知 Watcher 更新 UI）

3. `Object.defineProperty()` 如何让 Vue 2 变成响应式？

Vue 2 内部有个 defineReactive() 方法，它用 Object.defineProperty() 把 data 变成响应式。

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取 ${key}:`, val);
      return val;
    },
    set(newVal) {
      console.log(`修改 ${key}:`, newVal);
      val = newVal; // 这里会触发 Vue 重新渲染
    }
  });
}

let obj = {};
defineReactive(obj, 'name', 'Vue');

console.log(obj.name); // 读取 name: Vue
obj.name = 'React'; // 修改 name: React

🔹 Vue 2 响应式流程

Vue 初始化时，会遍历 data，用 defineReactive() 处理所有属性
访问属性时 (get)，Vue 记录依赖
修改属性时 (set)，Vue 触发更新

4. `defineProperty()` 的局限性

Vue 2 采用 Object.defineProperty() 但有缺点：

无法监听新增/删除的属性

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'Vue',
  configurable: false
});

obj.age = 18; // ❌ 不能监听新属性
delete obj.name; // ❌ 不能删除

Vue 2 需要用 Vue.set(obj, key, value) 手动让新属性变成响应式。

无法监听数组的变化

let arr = [1, 2, 3];
Object.defineProperty(arr, 0, {
  get() { console.log('获取索引 0'); return 1; },
  set(newVal) { console.log('修改索引 0:', newVal); }
});

arr[0]; // ✅ 触发 getter
arr[0] = 100; // ✅ 触发 setter
arr.push(4); // ❌ 无法监听 push

Vue 2 只能改写数组的方法（push、pop、splice），但仍然无法监听 arr[100] = 'new' 这样的新增操作。

5. Vue 3 为什么用 `Proxy` 替代 `defineProperty()`？

Vue 3 用 Proxy 解决 Vue 2 的问题：

let data = new Proxy({ name: 'Vue' }, {
  get(target, key) {
    console.log(`获取 ${key}:`, target[key]);
    return target[key];
  },
  set(target, key, value) {
    console.log(`修改 ${key}:`, value);
    target[key] = value;
    return true; // 必须返回 true，否则会报错
  }
});

console.log(data.name); // 获取 name: Vue
data.name = 'React'; // 修改 name: React
data.age = 18; // ✅ Vue 3 可以监听新属性！

🔹 为什么 Vue 3 用 Proxy？

支持监听新增/删除属性
支持监听数组操作
性能更好，不需要遍历所有 data 里的属性

6. 结论

	`Object.defineProperty()` (Vue 2)	`Proxy` (Vue 3)
监听对象属性	✅ 可以	✅ 可以
监听新增属性	❌ 不能	✅ 可以
监听删除属性	❌ 不能	✅ 可以
监听数组变化	❌ 不能（只能 hack 数组方法）	✅ 可以
性能	低，需要遍历所有 `data`	高，拦截整个对象