vue3源码最近崔哥的mini-vue很火，已经飙到5.9kstar。看来大家都很曲线，我也不能落后。这是我学习后实现的mini-vue，包括mini-vue代码实现，学习笔记和一些思考。以后我会持续更新学习笔记和思维导图。目前，我编写了反应式并绘制了效果思维导图。反应式思维导图createReactiveObject创建响应式对象参数target对象proxyMap缓存mapbaseHandlers处理对象step获取现有代理对象，性能优化创建代理对象，设置缓存函数createReactiveObject(target,proxyMap,baseHandlers){constexistingProxy=proxyMap.get(taget);//使用缓存优化if(existingProxy){returnexistingProxy;}constproxy=newProxy(taget,baseHandlers);proxyMap.set（目标，代理）；returnproxy;}baseHandlersmutableHandlers响应式处理对象，非只读isReadonly=false，非浅响应shallow=falseconstget=createGetter();constset=createSetter();exportconstmutableHandlers={get,set,};readonlyHandlersreadonly的处理对象，只读是Readonly=true，非浅响应shallow=falseconstreadonlyGet=createGetter(true);exportconstreadonlyHandlers={get:readonlyGet,set(target,key){//不可改变console.warn(`${target}of${key}无法设置，它是一个只读对象`);返回真；},};shallowReadonlyHandlersshallowReadonly处理对象，只读isReadonly=true,shallowresponseshallow=true,setandreadonlyHandlersconsistentconstshallowReadonlyGet=createGetter(true,true);exportconstshallowReadonlyHandlers=Object.assign({},readonlyHandlers,{get:shallowReadonlyGet,});createGetter生成get函数functioncreateGetter(isReadonly=false,shallow=false){return(target,key,receiver)=>{if(key===ReactiveFlags.IS_REACTIVE){//判断是否为只读对象return!isReadonly;}elseif(key===ReactiveFlags.IS_READONLY){//判断是否是响应式对象returnisReadonly;}//如果不是只读对象，收集依赖//只读对象不能改变，所以不需要收集if(!isReadonly){track(target,"get",key);}//获取属性值constres=Reflect.get(target,key,receiver);//只针对最外层和最响应的，不进行嵌套对象的响应式转换if(shallow){returnres;}//执行嵌套对象}returnres;};}createSetter生成集合函数functioncreateSetter(){return(target,key,value,receiver)=>{//设置属性值constres=Reflect.set(target,key,value,receiver);//触发依赖trigger(target,"set",key);返回资源；};}工具函数isProxy判断是reactive还是readonly类型isReactive是reactive类型isReadonly是readonly类型
