为什么Vue3的proxy需要Reflect呢

何为proxy

Proxy 对象用于定义或修改某些操作的自定义行为,可以在外界对目标对象进行访问前,对外界的访问进行改写。

var proxy = new Proxy(target, handler)

ES6 中的proxy目前提供了13种可代理操作拦截的行为。

何为reflect

ES6 标准中,将许多原本属于 Object 对象的方法转移到了 Reflect 对象上
把所有对对象的操作转义到Reflect上。可以将 Reflect 视为一种封装了底层操作的 API。

Reflect.get(target, propertyKey[, receiver])
//同等于
target[name]

Reflect.deleteProperty(target, propertyKey)
//同等于
delete target[name]

在一些旧方法执行错误时,只能通过try…catch去拿到,而reflect执行错误会返回false

try {
  Object.defineProperty(target, property, attributes);
} catch(e) {
  // 失败
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

Reflect 的作用是提供了一种统一且易于理解的方式来执行底层操作,而不是直接操作对象。这样可以保持代码的一致性和可读性,并且避免了直接操作底层方法可能引发的一些问题。

Reflect的好处

统一性:Reflect 提供了一组方法,与底层操作一一对应,使得代码更加统一和易于理解。
可读性:使用 Reflect 的方法可以使代码更加清晰,减少了直接操作底层方法可能引发的一些问题,并且可以直接看到操作的意图。
安全性:使用 Reflect 的方法可以避免一些潜在的问题,如在严格模式下直接使用 delete 可能会抛出错误,而 Reflect.deleteProperty 则会返回一个布尔值表示是否删除成功。

二者结合的好处

Proxy 的拦截器方法中可以调用 Reflect 的对应方法来实现默认行为或者在默认行为的基础上进行修改。例如,在 Proxy 的 get 拦截器中,可以使用 Reflect.get 方法来获取原始对象的属性值,并对其进行修改或返回。

let handler = {
  get: function(target, key, receiver) {
        return 1
    },
  set: function (target, key, value, receiver) {
    	console.log(`setting ${key}!`);
    	return Reflect.set(target, key, value, receiver);
  }
}
var obj = new Proxy({}, handler)
obj.a = 5 // setting 5!
console.log(obj.a) // 1

总结

Proxy 和 Reflect 是相辅相成的,通过结合使用它们可以实现更灵活和强大的代理功能,并且使用 Reflect 可以更好地管理和执行底层操作。

你可能感兴趣的:(javascript,前端,vue.js)