响应性基础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的功能

拓展:

什么是柯里化?

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

相关内容

热门资讯

激发暑期文旅消费新动能   内蒙古阿尔山,漫步国家森林公园,感受清凉夏日;甘肃敦煌,坐在鸣沙山上,听一场星空演唱会;江苏连云...
日股收跌0.19% 格隆汇7月11日|日经225指数收盘下跌76.68点,跌幅0.19%,报39569.68点。
遵义小伙跳水救人牺牲,年仅31... (转自:遵义晚报)7月8日下午6时,遵义市播州区出现感人一幕——尚嵇镇大坝社区全军坝组28岁的村民陈...
“小记者”走进河北省邯郸市食品... 中国质量新闻网讯 7月7日下午,河北省邯郸市食品药品检验中心(市食品药品安全科普基地)联合邯郸新闻传...
局地超42℃!下周河南持续高温... 大范围高温闷热天气强势来袭!12日起,西太平洋副热带高压将再次控制我省,受其影响,13日至20日我省...
毕市监处罚[2025]1021... 毕市监处罚[2025]1021号浏览:1次基本信息:处罚机关毕节市市场监督管理局处罚日期2025年0...
达势股份-达美乐中国以4D战略...   达势股份-达美乐中国("达美乐中国"或"达势股份"或"公司")(1405.HK)是达美乐比萨在中...
“向上取整”:变相“明抢” 转自:中国质量报□ 胡立彪近日,有媒体对快递行业称重计费问题进行测评,结果发现,被测评的8家快递企业...
以改革破局 盐城经开区多点突破... 中新网江苏新闻7月11日电(倪玲)改革是发展的根本动力,开放是进步的必由之路。近年来,盐城经开区将推...
中国代表强调国际刑事法院应依法... 转自:千龙网新华社联合国7月10日电 中国常驻联合国副代表孙磊10日在安理会审议国际刑事法院涉苏丹问...