当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2019-11-08 15:02

    proxy.fooproxy['foo']

    set(target, propKey, value, receiver):拦截对象属性的设置,比如 proxy.foo = vproxy['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 实例作为函数调用的操作,比如 proxy(...args)proxy.call(object, ...args)proxy.apply(...)

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

    4. 新标准性能红利

    Proxy 作为新标准,长远来看,JS引擎会继续优化 Proxy ,但 gettersetter 基本不会再有针对性优化。

    5. Proxy兼容性差

    可以看到, Proxy 对于IE浏览器来说简直是灾难。

    并且目前并没有一个完整支持 Proxy 所有拦截方法的Polyfill方案,有一个google编写的proxy-polyfill 也只支持了 get,set,apply,construct 四种拦截,可以支持到IE9+和Safari 6+。

    四 总结

    Object.defineProperty 对数组和对象的表现一直,并非不能监控数组下标的变化,vue2.x中无法通过数组索引来实现响应式数据的自动更新是vue本身的设计导致的,不是 defineProperty 的锅。 Object.defineProperty 和 Proxy 本质差别是,defineProperty 只能对属性进行劫持,所以出现了需要递归遍历,新增属性需要手动 Observe 的问题。 Proxy 作为新标准,浏览器厂商势必会对其进行持续优化,但它的兼容性也是块硬伤,并且目前还没有完整的polifill方案。

    参考

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

    https://www.jb51.net/article/171872.htm

    https://zhuanlan.zhihu.com/p/35080324