Vue3 Proxy 为何不直接返回target[key],选用Reflect

为什么使用 Reflect 而不是直接 targetkey

核心原因

1. 正确处理 this 绑定

const obj = {
  name: 'vue',
  get fullName() {
    return this.name + ' framework'  // this 需要指向正确的对象
  }
}

// 错误方式
const proxy1 = new Proxy(obj, {
  get(target, key) {
    return target[key]  // this 指向原始 target，而不是 proxy
  }
})

// 正确方式
const proxy2 = new Proxy(obj, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver)  // this 指向 proxy (receiver)
  }
})

console.log(proxy1.fullName)  // "vue framework" - 但 this 指向错误
console.log(proxy2.fullName)  // "vue framework" - this 正确指向 proxy

2. 继承链中的正确行为

const parent = {
  get value() {
    return 'parent value'
  }
}

const child = Object.create(parent)
child.name = 'child'

const proxy = new Proxy(child, {
  get(target, key, receiver) {
    console.log('访问:', key)
    // 如果用 target[key]，访问 value 时不会触发这个拦截器
    // 因为 value 在原型链上，target[key] 直接从原型获取
    
    // 用 Reflect.get 确保 receiver 参数正确传递
    return Reflect.get(target, key, receiver)
  }
})

proxy.value  // 正确触发拦截器并沿着原型链查找

3. Getter/Setter 的正确执行上下文

const user = {
  _name: 'vue',
  get name() {
    console.log('getter called, this is:', this)
    return this._name
  },
  set name(value) {
    console.log('setter called, this is:', this)
    this._name = value
  }
}

// 不使用 Reflect
const proxy1 = new Proxy(user, {
  get(target, key) {
    if (typeof target[key] === 'function') {
      return target[key].bind(target)  // 手动绑定到 target
    }
    return target[key]  // getter 中的 this 指向 target，不是 proxy
  }
})

// 使用 Reflect
const proxy2 = new Proxy(user, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver)  // getter 中的 this 指向 proxy
  }
})

// 测试差异
proxy1.name  // getter 中 this 指向原始对象
proxy2.name  // getter 中 this 指向 proxy 对象

4. 符号属性的正确处理

const sym = Symbol('test')
const obj = {
  [sym]: 'symbol value',
  regular: 'regular value'
}

const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    console.log('Accessing:', key)
    
    // target[key] 对符号属性也能工作，但...
    // Reflect.get 提供了更一致的行为
    return Reflect.get(target, key, receiver)
  }
})

proxy[sym]      // 正确处理符号属性
proxy.regular   // 正确处理普通属性

5. 异常处理的一致性

const obj = {}
Object.defineProperty(obj, 'readOnly', {
  value: 'cannot change',
  writable: false,
  configurable: false
})

// 不使用 Reflect
const proxy1 = new Proxy(obj, {
  set(target, key, value) {
    target[key] = value  // 严格模式下可能抛出异常
    return true  // 但总是返回 true，不一致
  }
})

// 使用 Reflect
const proxy2 = new Proxy(obj, {
  set(target, key, value, receiver) {
    return Reflect.set(target, key, value, receiver)  // 返回实际的操作结果
  }
})

// proxy1.readOnly = 'new'  // 可能抛出异常但返回 true
// proxy2.readOnly = 'new'  // 返回 false，表示设置失败

Vue 3 中的实际应用

// Vue 3 响应式实现简化版
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 依赖收集
      track(target, key)
      
      // 使用 Reflect 确保正确的 this 绑定和原型链查找
      const result = Reflect.get(target, key, receiver)
      
      // 如果是对象，递归代理
      if (isObject(result)) {
        return reactive(result)
      }
      
      return result
    },
    
    set(target, key, value, receiver) {
      const oldValue = target[key]
      
      // 使用 Reflect 进行实际设置，获取操作是否成功
      const result = Reflect.set(target, key, value, receiver)
      
      // 只有设置成功且值发生变化才触发更新
      if (result && value !== oldValue) {
        trigger(target, key)
      }
      
      return result
    }
  })
}

总结

使用 Reflect 而不是直接 target[key] 的主要原因：

1. 正确的 receiver 传递 ：确保 getter/setter 中的 this 指向代理对象
2. 一致的 API：Reflect 方法与 Proxy 拦截器一一对应
3. 返回值语义：Reflect 方法返回操作是否成功，而不是总是 true
4. 原型链处理：正确处理继承关系中的属性访问
5. 标准化行为：提供更可预测和一致的元编程体验

这些特性在复杂的响应式系统中至关重要，确保代理对象的行为与原始对象完全一致。