响应性基础API
创始人
2024-05-27 01:47:59
0

一.什么是proxy和懒代理?

什么是proxy?

proxy对象是用于定义基本操作的自定义行为(如:属性查找,赋值,枚举,函数调用等等)。

什么是懒代理?

懒代理:在初始化的时候不会进行全部代理,而是在访问的时候进行代理,这样就使得cpu的压力分配到不同的阶段,就不会产生很大的开销。

二.reactive与readonly的区别是什么?又该如何进行优化的?

reactive与readonly的区别:
  • reactive一般只接受ES普通的引用数据类型,尽管它可以接受Proxy对象,但是没有意义,没有必要,

  • 但是,Readonly可以接受Proxy对象且有实际的意义,它可以获取纯对象或者Proxy或者Reflmpl,返回原始代理的只读代理。总的来说,它进行了两步操作,首先是reactive其次另生成了一个只读的Proxy

  • readonly的只读是深层的只读:访问的任何嵌套property也是只读的。

  • readonly存在的意义有2个,一个是保护数据不被修改,另一个是提升性能。

例子:


运行结果:

第二个由于用的是可读的所以值不会发生变化。

优化:

因为reactive与readonly函数代码的高度相似从而进一步的抽离他们的相同点,对其进行优化,增加代码的可读性

优化步骤:

  • 1.重构get,set操作:vue3把get放入到了一个高阶函数creatGetter中,高阶函数返回get,set也同理,我们现在来封装一下:其中get我们可以通过给定一个传参去判断是否是readonly,而readonly的set有些特殊我们先不进行修改~但是这个代码还是不够美观,继续优化

function createGetter(isReadonly = true) {return function get(target, key) {const res = Reflect.get(target, key)if (isReadonly) {track(target, key)}return res}
}function createSetter() {return function set(target, key, value, receiver) {const res = Reflect.set(target, key, value, receiver)trigger(target, key)return res}
}export const reactive = (raw) => {return new Proxy(raw,  {get: createGetter(),set: createSetter()})
}export const readonly = (raw) => {return new Proxy(raw, {get: createGetter(false),set(target, key, value, receiver) {return true},})
}
  • 2.baseHandlers: 在src目录下新建一个baseHandlers.ts文件并且把之前封装好的creatGetter,creatSetter提取到这个文件夹中

  • 3.createActiveObject函数:为了语义化vue3又把new Proxy的操作也抽离成了createActiveObject函数

  • 4.优化get和set捕获器:我们回到baseHandlers.ts文件里来,最后一步优化

  • 5.警告用户不能set操作:这还没有结束,我们的readonly还差一个触发set操作时,警告用户无法set的功能

拓展:

什么是柯里化?

函数柯里化 概念:只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。

相关内容

热门资讯

中证A500ETF摩根(560... 8月22日,截止午间收盘,中证A500ETF摩根(560530)涨1.19%,报1.106元,成交额...
A500ETF易方达(1593... 8月22日,截止午间收盘,A500ETF易方达(159361)涨1.28%,报1.104元,成交额1...
何小鹏斥资约2.5亿港元增持小... 每经记者|孙磊    每经编辑|裴健如 8月21日晚间,小鹏汽车发布公告称,公司联...
中证500ETF基金(1593... 8月22日,截止午间收盘,中证500ETF基金(159337)涨0.94%,报1.509元,成交额2...
中证A500ETF华安(159... 8月22日,截止午间收盘,中证A500ETF华安(159359)涨1.15%,报1.139元,成交额...
科创AIETF(588790)... 8月22日,截止午间收盘,科创AIETF(588790)涨4.83%,报0.760元,成交额6.98...
创业板50ETF嘉实(1593... 8月22日,截止午间收盘,创业板50ETF嘉实(159373)涨2.61%,报1.296元,成交额1...
港股异动丨航空股大幅走低 中国... 港股航空股大幅下跌,其中,中国国航跌近7%表现最弱,中国东方航空跌近5%,中国南方航空跌超3%,美兰...
电网设备ETF(159326)... 8月22日,截止午间收盘,电网设备ETF(159326)跌0.25%,报1.198元,成交额409....
红利ETF国企(530880)... 8月22日,截止午间收盘,红利ETF国企(530880)跌0.67%,报1.034元,成交额29.0...