Vue3和Mobx5都使用Proxy了,你更应该了解Proxy

    

Vue3和Mobx5都使用Proxy了,你更应该了解Proxy

Object.defineProperty的缺陷
说到Proxy,就不得不提Object.defineProperty,我们都知道,vue3.0之前的版本都是使用该方法来实现数据的响应式,具体是:

通过设定对象属性getter/setter方法来监听数据的变化,同时getter也用于依赖收集,而setter在数据变更时通知订阅者更新视图。

大概如下代码所示:

function defineReactive(obj, key, value) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            collectDeps() // 收集依赖
            return value
        },
        set(newVal) {
            observe(newVal); // 若是对象需要递归子属性
            if (newVal !== value) {
                notifyRender() // 通知订阅者更新
                value = newVal;
            }
        }
    })
}
function observe(obj) {
    if (!obj || typeof obj! === 'object') {
        return
    }
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key]);
    })
}

var data = {
    name: 'wonyun',
    sex: 'male'
}
observe(data)

虽然Object.defineProperty通过为属性设置getter/setter能够完成数据的响应式,但是它并不算是实现数据的响应式的完美方案,某些情况下需要对其进行修补或者hack,这也是它的缺陷,主要表现在两个方面:

无法检测到对象属性的新增或删除

由于js的动态性,可以为对象追加新的属性或者删除其中某个属性,这点对经过Object.defineProperty方法建立的响应式对象来说,只能追踪对象已有数据是否被修改,无法追踪新增属性和删除属性,这就需要另外处理。

目前Vue保证响应式对象新增属性也是响应式的,有两种方式:

Vue.set(obj, propertName/index, value)

响应式对象的子对象新增属性,可以给子响应式对象重新赋值

data.location = {
    x: 100,
    y: 100
}
data.location = {...data, z: 100}

响应式对象删除属性,可以使用Vue.delete(obj, propertyName/index)或者vue.$delete(obj, propertyName/index); 类似于删除响应式对象子对象的某个属性,也可以重新给子对象赋值来解决。

不能监听数组的变化

vue在实现数组的响应式时,它使用了一些hack,把无法监听数组的情况通过重写数组的部分方法来实现响应式,这也只限制在数组的push/pop/shift/unshift/splice/sort/reverse七个方法,其他数组方法及数组的使用则无法检测到,例如如下两种使用方式:

vm.items[index] = newValue

vm.items.length--

那么vue怎么实现数组的响应式呢,并不是重写数组的Array.prototype对应的方法,具体来说就是重新指定要操作数组的prototype,并重新该prototype中对应上面的7个数组方法,通过下面代码简单了解下实现原理:

const methods = ['pop','shift','unshift','sort','reverse','splice', 'push'];
 // 复制Array.prototype,并将其prototype指向Array.prototype
let proto = Object.create(Array.prototype);
methods.forEach(method => {
    proto[method] = function () { // 重写proto中的数组方法
        Array.prototype[method].call(this, ...arguments);
        viewRender() // 视图更新
    }
})

function observe(obj) {
    if (Array.isArray(obj)) { // 数组实现响应式
        obj.__proto__ = proto; // 改变传入数组的prototype
        return;
    }
    if (typeof obj === 'object') {
        ... // 对象的响应式实现
    }

Proxy的使用
Proxy,字面意思是代理,是ES6提供的一个新的API,用于修改某些操作的默认行为,可以理解为在目标对象之前做一层拦截,外部所有的访问都必须通过这层拦截,通过这层拦截可以做很多事情,比如对数据进行过滤、修改或者收集信息之类。借用proxy的巧用的一幅图,它很形象的表达了Proxy的作用。
QQ截图20191030101649.png

ES6原生提供的Proxy构造函数,用法如下:

var proxy = new Proxy(obj, handler)

其中obj为Proxy要拦截的对象,handler用来定制拦截的操作,返回一个新的代理对象proxy;Proxy代理特点:

Proxy直接代理整个对象而非对象属性

Proxy的代理针对的是整个对象,而不是像Object.defineProperty针对某个属性。只需做一层代理就可以监听同级结构下的所有属性变化,包括新增属性和删除属性

Proxy也可以监听数组的变化

例如上面vue使用的Object.defineProperty实现响应式方式用Proxy来实现则相对比较简单:

let handler = {
 get(target, key){
   if (target[key] === 'object' && target[key]!== null) {
     // 嵌套子对象也需要进行数据代理
     return new Proxy(target[key], hanlder)
   }
   collectDeps() // 收集依赖
   return Reflect.get(target, key)
 },
 set(target, key, value) {
   if (key === 'length') return true
   notifyRender() // 通知订阅者更新
   return Reflect.set(target, key, value);
 }
}
let proxy = new Proxy(data, handler);
proxy.age = 18 // 支持新增属性
let proxy1 = new Proxy({arr: []}, handler);
proxy1.arr[0] = 'proxy' // 支持数组内容变化

Proxy代理目标对象,是通过操作上面的13种trap来完成的,这与ES6提供的另一个apiReflect的13种静态方法一一对应。二者一般是配合使用的,在修改proxy代理对象时,一般也需要同步到代理的目标对象上,这个同步就是用Reflect对应方法来完成的。例如上面的Reflect.set(target, key, value)同步目标对象属性的修改。需要补充一点:

13种trap操作方法中,若初始化时handler没设置的方法就直接操作目标对象,不会走拦截操作

Proxy的使用场景
Proxy因为在目标对象之前架设了一层拦截,外部对该目标对象的访问都必须经过这次拦截。那么通过这层拦截,可以做很多事情,例如控制过滤、缓存、数据验证等等,可以说Proxy的使用场景比较广,下面简单列举几个使用场景,更多实用场景可以参考Proxy的巧用。

Vue3的数据响应

vue3中利用Proxy实现数据读取和设置时进行拦截,在拦截trap中实现数据的依赖收集以及触发视图更新操作,vue3该部分实现的主要伪码如下:

function get(target, key, receiver) { // handler.get的拦截实现
    const res = Reflect.get(target, key, receiver)
    if(isSymbol(key) && builtInSymbols.has(key)) return res
    if (isRef(res)) return res.value
    track(target, OperationTypes.GET, key) // 收集依赖
    return isObject(res) ? reactive(res) : res
}
// handler.set的拦截操作
function set(target, key, value, receiver) {
    value = toRaw(value) // 获取缓存响应数据
    oldValue = target[key]
    if (isRef(oldValue) && !isRef(value)) {
       oldValue.value = value
       return true
    }
    const result = Reflect.set(target, key, value, receiver)
    if (target === toRaw(receiver)) { //set拦截只限对象本身
       ... // 不同环境操作处理,并省略下面trigger方法第二参数获取逻辑
       trigger(target, OperationTypes.x, key) // 触发视图更新
    }
    return result
}

获取属性对应的值,无该属性或者属性为空返回默认值

在项目中经常遇到这样的需求,在前端拿到后端返回的数据时,获取某些可选字段时,如果其值为空或者不存在该属性时,可以设置一个默认值,类似loadsh库的get方法_.get(object, path, [defaultValue])。下面就对象形式下_.get用Proxy来实现,代码如下:

 function getValueByPath(object, path, defaultValue) {
     let proxy = new Proxy(object, {
         get(target, key) {
             if (key.startsWith('.')) {
                 key = key.slice(1);
             }
             if (key.includes('.')) {
                path = path.split('.');
                let index = 0, len = path.length;
                while(target != null && index < len) {
                    target = target[path[index++]]
                }
                return target || defaultValue;
             }
             if (!(key in target) || !target[key]) {
               return defaultValue
             }
             return Reflect.get(target, key)
         }
     });
     return proxy[path]
 }

需要注意的是,参数path若有类似a.b.c这样嵌套的路径时,我们是直接在Proxy的handler.get中处理的,如果在proxy对象实例上调用如proxy.a.b.c则需要在Proxy的handler.get对返回对象的属性还需要创建其Proxy实例,类似如下:

function getValueByPath(object, path, defaultValue) {
    return proxy = new Proxy(object, {
      get(target, key) {
          if (isObject(target[key])){
              return new Proxy(target[key], {get(){}})
          }
          ... // 其他省略
      }
    })
}

实现数组负数索引的访问

正常的数组,如果访问数组的负数索引会得到undefined,现在要实现类似字符串的substr方法,传递负数索引index,表示从倒数第index开始读取,实现拦截如下:

function getArrItem(arr) {
    return new Proxy(arr, {
        get(target, key, receiver) {
            let index = Number(key);
            if (index < 0) {
              key = String(target.length + index);
            }
            return Reflect.get(target, key, receiver)
        }
    });
}

Proxy的劣势
虽然Proxy相对于Object.defineProperty有很有优势,但是并不是说Proxy就没有劣势,这主要表现在以下两个方面:

兼容性问题,无完全polyfill

Proxy为ES6新出的API,浏览器的对其支持情况可以在caniuse查到,如下图所示:
408483-20191021194405307-1820879094.png

可以看出虽然大部分浏览器支持Proxy特性,但是一些浏览器或者其低版本不支持Proxy,其中IE、QQ浏览器、百度浏览器等完全不支持,因此Proxy有兼容性问题。那能否像ES6其他特性那样有对应的polyfill解决方案呢,答案并不那么乐观。其中作为ES6转换的翘楚babel,在其官网明确做了说明:

Due to the limitations of ES5, Proxies cannot be transpiled or polyfilled.

也就是说,由于ES5的限制,ES6的Proxy没办法被完全polyfill,所以babel没有提供对应的转换支持,Proxy的实现是需要JS引擎级别提供支持,目前大部分主要的JS引擎提供了支持,可以查看ES6 Proxy compatibilit。

然而,截止目前2019年10月,Google开发的Proxy polyfill:proxy-polyfill,其实现也是残缺的,表现在:

只支持Proxy的4个trap:get、set、apply和construct

部分支持的trap其功能也是残缺的,如set不支持新增属性

该polyfill不能代理数组

性能问题

Proxy的另一个就是性能问题,为此有人专门做了一个对比实验,原文在这里thoughts-on-es6-proxies-performance,对应的中文翻译可以参考ES6 Proxy性能之我见。Proxy的性能比Promise还差,这就要需要在性能和简单实用上进行权衡。例如vue3使用Proxy后,其对对象及数组的拦截很容易实现数据的响应式,尤其对数组来说。

另外,Proxy作为新标准将受到浏览器厂商重点持续的性能优化,性能这块相信会逐步得到改善。

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

  Previous post 前端图片上传
Next post   文件上传解析漏洞

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://aiylqy.com
个性签名:毁掉一个人最好的方式就是放纵他的缺点。

  近期评论

只有脚踏实地的人,才能够说:路,就在我的脚下。

无论你选择做什么,追求完美的程度决定你成就的高度。

这个世界最脆弱的是生命,身体健康,很重要。

上帝说:你要什么便取什么,但是要付出相当的代价。

现在站在什么地方不重要,重要的是你往什么方向移动。