Reflect和Proxy结合实现响应式

参考一
参考二

Reflect是一个内置的对象，它提供拦截 JavaScript 操作的方法。
他可以与Proxy结合使用以实现和Object.defineProperty类似的功能，且性能更好，Vue3正在考虑用此替换之前的方案实现响应式

// target 取值目标, key 键值, receiver getter/setter调用时的this值
Reflect.get(target, key, receiver)
Reflect.set(target, key, value, receiver)
new Proxy(proxyObj,{
	get(target, key, receiver){
		return target[key]
	},
	set(target, key, value, receiver){
		target[key] = value
	}
})

使用Reflect和Proxy实现响应式

function observe(proxyObj,getCb,setCb) {
  let handler = {
    get(target,key,receiver){
      typeof getCb==='function'&&getCb(target,key)
      if(typeof target[key]==='object'&&target[key]!==null) 
        return new Proxy(target[key],handler) // 完美监听Object or Array
      else
        return Reflect.get(target,key,receiver)
    },
    set(target,key,value,receiver){
      typeof setCb==='function'&&setCb(key,value,target)
      return Reflect.set(target,key,value,receiver)
    }
  }
  return new Proxy(proxyObj,handler)
}

// test
let data= {a:1}
let p = observe(
  data,
  (t,k)=>console.log(`get: ${k}=${t[k]}`),
  (k,v,t)=>console.log(`set: ${k}=${v}`)
)
p.a; // get: a=1
p.a=2 // set: a=2

Vue3之所以要使用Proxy代替原先的Object.defineProperty，原因在于：

1.无需再一层层递归observe，性能更好，代码易读性加强
2.使用Reflect无需再区别对待Object和Array

Reflect其他用法：

Reflect.apply(fn, thisArgument, args) // 代替fn.apply()
Reflect.construct(Constructor,args) // 代替 new Constructor(...args)
Reflect.defineProperty(target, key, disc) // 代替Object.defineProperty(target,key,disc)
Reflect.getOwnPropertyDescriptor(target,key) // 代替Object.getOwnPropertyDescriptor(target,key)

Reflect.has(target,key) // 判断是否有key,相当于key in target, 注意：原型上的属性也会遍历到
Reflect.ownKeys(target) // 等价于[...Object.getOwnPropertyNames(target), ...Object.getOwnPropertySymbols(target)]

Reflect.setPrototypeOf(target, prototype)
Reflect.getPrototypeOf(target)