文章目录

前言

Vue 的响应式系统是其核心特性之一，它使数据变化能够自动反映到视图上。Vue 2 采用 Object.defineProperty 实现响应式，而 Vue 3 则全面转向 Proxy。这一转变解决了 defineProperty 的三个主要痛点：

  • 动态属性问题：无法检测新增/删除的属性
  • 数组支持有限：无法检测索引设置和长度变化
  • 性能瓶颈：初始化时需要递归遍历所有属性

一、Proxy vs defineProperty 响应式实现机制

1.1 defineProperty 实现机制

function defineReactive(obj, key) {
  // 一个 Dep（Dependency）实例，用于管理依赖（Watcher）
  const dep = new Dep() 
  let val = obj[key]
  
  Object.defineProperty(obj, key, {
    get() {
      dep.depend() // 依赖收集（当前 Watcher 订阅此属性）
      return val
    },
    set(newVal) {
      if (newVal === val) return
      val = newVal
      dep.notify() // 通知所有 Watcher 更新
    }
  })
}

Vue 2.x 的响应式系统基于 观察者模式，核心是：

  • Dep（Dependency）：管理某个属性的所有依赖（Watcher）。
  • Watcher：代表一个依赖（如组件的 render 函数、computed 计算属性等）。
  • defineReactive 的核心流程
    初始化：用 Object.defineProperty 劫持 obj[key]。
    读取时（get）：调用 dep.depend()，让当前 Watcher 订阅此属性。
    修改时（set）：如果值变化，调用 dep.notify() 通知所有 Watcher 更新。

初始化时递归转换所有嵌套属性

1.2 Proxy 实现机制

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key) // 依赖收集
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      if (hasChanged(value, oldValue)) {
        trigger(target, key) // 值变化时才触发更新
      }
      return result
    }
  })
}

关键组成部分

  1. Proxy 拦截器
    get 陷阱：在属性被访问时触发
    set 陷阱：在属性被修改时触发

  2. Reflect 的使用
    通过 Reflect.get/set 保持默认行为
    确保 this 绑定正确（通过 receiver 参数）

  3. 响应式系统核心
    track(target, key)：收集当前正在运行的 effect
    trigger(target, key)：通知相关 effect 重新执行

惰性劫持整个对象

二、Proxy 如何解决 defineProperty 的三大核心痛点

2.1 动态属性问题

defineProperty 的困境：

const obj = { a: 1 }
Vue.observable(obj)
// 新增属性无法被检测
obj.b = 2 // ✗ 不会触发更新

Proxy 的解决方案：

const proxy = reactive({ a: 1 })
// 动态添加属性
proxy.b = 2 // ✓ 触发 set 拦截

实现原理：

  • Proxy 拦截的是整个对象的操作入口(不需要预先定义属性描述符)
  • 任何属性的增删改查都会触发对应的 trap

2.2 数组操作支持

defineProperty 的妥协方案：

// Vue 2 必须重写数组方法
const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
;['push', 'pop'].forEach(method => {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator(...args) {
    const result = original.apply(this, args)
    dep.notify() // 手动触发更新
    return result
  })
})

Proxy 的天然支持：

const arr = reactive([1, 2, 3])
// 所有数组操作都能被拦截
arr.push(4)    // ✓ 触发 set
arr.length = 1 // ✓ 触发 set
arr[0] = 5     // ✓ 触发 set

2.3 性能瓶颈

defineProperty 的性能陷阱：

// 初始化时递归转换所有嵌套属性
function defineReactive(obj) {
  Object.keys(obj).forEach(key => {
    let val = obj[key]
    if (typeof val === 'object') {
      defineReactive(val) // 立即递归
    }
    // 定义属性描述符...
  })
}

Proxy 的惰性处理：

const obj = reactive({ 
  a: { b: { c: 1 } } 
})
// 只有访问到的层级才会被代理
console.log(obj.a.b.c) 
// 访问链：obj → obj.a (创建代理) → obj.a.b (创建代理) → obj.a.b.c

Proxy 的惰性劫持机制使得 Vue 3 在大型对象处理上获得显著性能提升

特性Vue 2 (defineProperty)Vue 3 (Proxy)
初始化方式递归遍历所有属性按需代理（惰性劫持）
数组支持需要特殊处理原生支持
动态属性需要 Vue.set自动支持
性能初始化性能较差运行时性能更优
拦截操作仅 get/set13 种拦截操作

三、Proxy + Reflect

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 proxy handler 的方法一一对应。Reflect 不是一个函数对象，因此它是不可构造的。Reflect 的所有属性和方法都是静态的。

对属性内存的控制、原型链的修改、函数的调用等等，这些都属于底层实现，属于一种魔法，因此，需要将它们提取出来，形成一个正常的API，并高度聚合到某个对象中，于是，就造就了Reflect对象

因此，你可以看到Reflect对象中有很多的API都可以使用过去的某种语法或其他API实现。

3.1 Reflect API 的核心作用

Reflect 不是 Vue 特有的 API，但它与 Proxy 配合解决了几个关键问题：

const proxy = new Proxy(target, {
  get(target, key, receiver) {
    // 使用 Reflect 保证正确的 this 指向
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    // 返回操作是否成功的布尔值
    return Reflect.set(target, key, value, receiver)
  }
})

3.1.1 保持正确上下文（ receiver 传递）

1. 先看一个会出问题的场景

const parent = {
  _bar: 1,
  get foo() {
    return this._bar; // 计算属性依赖 _bar
  }
};
const child = {};
Object.setPrototypeOf(child, parent); // child 继承 parent

2. 用 Proxy 代理 child（但不传 receiver）

const proxyChild = new Proxy(child, {
  get(target, key) {
    console.log('拦截到读取:', key);
    return Reflect.get(target, key); // ❌ 故意不传 receiver
  }
});

// 测试访问
console.log(proxyChild.foo);
输出结果：

拦截到读取: foo
1
  • 访问 proxyChild.foo 触发了 Proxy 的 get 拦截。
  • Reflect.get(target, key) 没有传 receiver，导致：
    this._bar 中的 this 指向原始对象 parent（而不是代理对象 proxyChild）。
    _bar 的读取绕过了 Proxy，直接返回 parent._bar 的值（1）。

3. 灾难性后果

  • 依赖收集失效：
    Vue 需要在 foo 中访问 _bar 时，拦截 _bar 的读取以收集依赖。但此时 this 指向 parent，导致：
    _bar 没有被 Proxy 拦截 → 无法建立 foo 对 _bar 的依赖关系。
  • 更新链断裂：
    修改 _bar 时，Vue 不知道 foo 需要更新，界面显示旧值。

4. 传递 receiver 的修复效果

const proxyChild = new Proxy(child, {
  get(target, key, receiver) { // ✅ 传递 receiver
    console.log('拦截到读取:', key);
    return Reflect.get(target, key, receiver); // 关键修复
  }
});

console.log(proxyChild.foo);
输出结果：

拦截到读取: foo
拦截到读取: _bar  // 这一次拦截到了 _bar！
1
  • 关键区别：
    Reflect.get(target, key, receiver) 的 receiver 参数 强制 this 指向代理对象 proxyChild。
    当 foo 计算属性执行 this._bar 时：
    this 是 proxyChild → 触发 _bar 的 Proxy 拦截。
    Vue 能正确收集 foo → _bar 的依赖关系。

5. 为什么 receiver 能解决这个问题？
receiver 的本质：
它是 Proxy 设计中的 “操作上下文”，决定了 this 的指向。
JavaScript 的隐式规则：
当通过 obj.foo 访问 getter 时，this 默认指向 obj。Proxy 通过 receiver 覆盖这一行为，确保 this 指向代理对象。

6. 类比现实世界
想象你在用 对讲机（Proxy） 和队友通信：

不传 receiver：
你说“报告位置”，队友直接回答（绕过对讲机），指挥部（Vue）听不到，无法记录谁依赖谁。
传递 receiver：
你说“报告位置”，队友必须通过对讲机回答，指挥部听到并记录：“A 依赖 B 的位置信息”。

3.1.2 标准化操作结果（Reflect API）

Vue 2 的问题场景

const obj = {}
Object.defineProperty(obj, 'foo', { 
  writable: false,
  value: 1
})

// Vue 2 的 set 实现
try {
  obj.foo = 2 // 直接赋值会抛出 TypeError
} catch (e) {
  console.error(e) // 需要 try-catch 处理
}

Vue 3 的改进实现

set(target, key, value, receiver) {
  const oldValue = target[key]
  const success = Reflect.set(target, key, value, receiver) // 返回布尔值
  
  if (!success) {
    console.warn(`属性 ${String(key)} 不可写`)
    return false
  }
  
  if (hasChanged(value, oldValue)) {
    trigger(target, key)
  }
  return success
}

3.1.3 元操作能力支持（Symbol/内部属性）

Vue 2 的局限性

const obj = { [Symbol.iterator]: function() {} }

// Vue 2 无法监听的场景：
defineReactive(obj, Symbol.iterator) // 报错：Symbol 不能作为键
obj[Symbol.toStringTag] = 'Custom'  // 无法响应

Vue 3 的完整支持

const sym = Symbol('description')
const obj = reactive({})

// 支持 Symbol 属性
obj[sym] = 'value' // 正常触发响应式

// 支持所有 Reflect 方法
Reflect.get(obj, sym)
Reflect.ownKeys(obj) // 包含 Symbol 键
维度Vue 2 (defineProperty)Vue 3 (Proxy + Reflect)
原型链支持❌ 递归处理原型链✅ 自动通过 receiver 传递（保证所有访问经过代理）
错误处理⚠️ 依赖 try-catch✅ 标准化布尔返回值
元编程支持❌ 仅支持字符串键✅ 完整 Symbol/Reflect 操作
性能影响⚠️ 初始化递归遍历✅ 按需代理（惰性劫持）
代码可维护性❌ 分散的特殊处理逻辑（如数组方法重写）✅ 统一拦截层
动态属性响应⚠️需 Vue.set/Vue.delete✅ 原生支持
数组响应式⚠️需重写数组方法（push/pop等）✅ 原生支持

3.2 Proxy 与 Reflect 关系解析

  • Proxy 的角色
    拦截层：创建对象的虚拟代理，拦截13种基本操作
    自定义行为：允许开发者修改对象的默认行为
    透明访问：对外保持与原对象相同的接口

  • Reflect 的角色
    反射层：提供操作对象的标准化方法
    默认行为：包含与Proxy拦截器一一对应的静态方法
    元操作：支持符号属性等高级操作

Proxy定义拦截，Reflect提供默认实现

Proxy 的完整拦截能力

拦截操作对应 Reflect 方法
getReflect.get
setReflect.set
hasReflect.has
deletePropertyReflect.deleteProperty
……

Proxy + Reflect 黄金组合：
保持默认行为的同时支持自定义拦截
正确处理原型链和 this 绑定问题
提供类型安全的操作结果（返回布尔值）

总结

1. 机制革新：

  • 从 Object.defineProperty 的静态劫持升级为 Proxy 的动态代理
  • 拦截操作从仅限 get/set 扩展到 13 种对象基本操作
  • 通过 Reflect 实现标准化元编程，解决了上下文传递等关键问题

2. 三大痛点突破：

  • 动态属性：无需特殊 API 自动检测属性增删
  • 数组支持：原生支持所有变异方法及索引操作
  • 性能优化：惰性代理机制降低初始化开销
# vue.js # 前端 # javascript
Logo
乐奇 Rokid 开放社区

更多推荐

Word Embedding ：从分布式假设到神经网络语言模型

Word Embedding（词嵌入）是一种将离散的词汇符号映射到连续的低维稠密向量空间的技术。在这个向量空间中，语义相似的词在几何距离上彼此接近，从而实现了从"符号匹配"到"语义计算"的跨越。核心定义词嵌入是将单词（或多词短语）表示为固定维度的实值向量，这些向量之间的距离（例如余弦相似度）反映了单词之间的相关性，这种相关性基于单词通常出现的上下文。分布式假设（1954）↓统计共现分析（LSA/S

avatar 乐奇 Rokid 开放社区

镜游小导：运行在 Rokid AR 眼镜上的景区实景讲解智能体

项目以 RokidAIUI 开放智能体形态交付：页面用.ink描述，运行在眼镜端智能体运行时，直接调用系统能力。AGENTS.md身份镜游小导v1.0.0，景区 AR 实景讲解智能体；权限（Capabilities）microphonenetworkaudiogyroscope；技能（Skills）。

avatar 乐奇 Rokid 开放社区
cover

AI 智能眼镜技术文档

avatar 乐奇 Rokid 开放社区