为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

2020-06-12 20:45:47易采站长站整理

不止如此,

Proxy
对数组的方法也可以监测到,不需要像上面vue2.x源码中那样进行
hack

完美!!!

3. Proxy支持13种拦截操作,这是defineProperty所不具有的

get(target, propKey, receiver):拦截对象属性的读取,比如

proxy.foo
proxy['foo']

set(target, propKey, value, receiver):拦截对象属性的设置,比如

proxy.foo = v
proxy['foo'] = v
,返回一个布尔值。

has(target, propKey):拦截

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

deleteProperty(target, propKey):拦截

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

ownKeys(target):拦截

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

getOwnPropertyDescriptor(target, propKey):拦截

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

defineProperty(target, propKey, propDesc):拦截

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

preventExtensions(target):拦截

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

getPrototypeOf(target):拦截

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

isExtensible(target):拦截

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

setPrototypeOf(target, proto):拦截

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

apply(target, object, args):拦截

Proxy