vue3.0放弃defineProperty,使用es6的原生拦截器proxy—–proxy的13种拦截操作

object.defineProperty的缺点:
1、监控数组下标的变化时,开销很大
2、它只能劫持对象的属性,所以它需要遍历对象的每个属性,如果属性值是对象,那么需要深度遍历,而proxy是直接代理对象,不需要遍历操作
3、它对新增属性需要手动进行Observe,vue2需要使用vm.$set才能保证新增的属性也是响应式

以下摘自阮一峰ES6入门

1、get(target, propKey, receiver):

拦截对象属性的读取,比如proxy.fooproxy['foo']

2、set(target, propKey, value, receiver):
拦截对象属性的设置,比如proxy.foo = vproxy['foo'] = v,返回一个布尔值。

3、has(target, propKey):

拦截propKey in proxy的操作,返回一个布尔值。

4、deleteProperty(target, propKey):

拦截delete proxy[propKey]的操作,返回一个布尔值。

5、ownKeys(target):

拦截Object.getOwnPropertyNames(proxy)Object.getOwnPropertySymbols(proxy)Object.keys(proxy)for...in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。

6、getOwnPropertyDescriptor(target, propKey):

拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。

7、defineProperty(target, propKey, propDesc):

拦截Object.defineProperty(proxy, propKey, propDesc)Object.defineProperties(proxy, propDescs),返回一个布尔值。

8、preventExtensions(target):

拦截Object.preventExtensions(proxy),返回一个布尔值。

9、getPrototypeOf(target):

拦截Object.getPrototypeOf(proxy),返回一个对象。

10、isExtensible(target):

拦截Object.isExtensible(proxy),返回一个布尔值。

11、setPrototypeOf(target, proto):

拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。

12、apply(target, object, args):

拦截Proxy 实例作为函数调用的操作,比如proxy(...args)proxy.call(object, ...args)proxy.apply(...)

13、construct(target, args):

拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)

本文来自 余 倩倩 投稿,不代表 PmTemple 立场,如若转载,请注明出处:

。如有涉及侵权行为,请发送相关证明材料至邮箱admin@pmtemple.com
(2)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
余 倩倩的头像余 倩倩前端大师
上一篇 2021年7月20日 下午4:10
下一篇 2021年11月2日 上午11:17

相关推荐

发表回复

登录后才能评论
微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部