筆記vue3初探響應(yīng)式原理

CompositionAPI遷出Vue3源碼：git 生成sourcemap"dev""dev":"nodescripts/dev.js--yarn源碼位置是在package文件件內(nèi)，實(shí)際上源碼主要分為兩部分，編譯器和運(yùn)行時環(huán)境。編譯器compiler-core編譯邏compiler-dom針對瀏覽器平臺編譯邏輯compiler-sfc針對單文件組件編譯邏輯compiler-ssrruntime-coreruntime-domruntime-testreactivitytemte- vue代碼，整合編譯器和運(yùn)行時server-renderer服務(wù)器端渲染share公用方法Vue3測試代碼 o-<!DOCTYPE<!DOCTYPE<htmlname="viewport"content="width=device-width,initial-patible" o<script<divdata:{message: oVue3!'Composition 數(shù)據(jù)響應(yīng)式，創(chuàng) position-<!DOCTYPE<!DOCTYPE<htmlname="viewport"content="width=device-width,initial-patible" <script<div<h1><h1>Composition<div>count:{{state.countconst{}=constApp=setup是一個新的組件選項(xiàng)，它是組件內(nèi)使用CompositionAPI//調(diào)用時刻是初始化屬性確定后，beforeCreatesetup()//響應(yīng)化：接收一個對象，返回一個響應(yīng)式 conststate=reactive({count:0//return{state}}<div>doubleCount:<div>doubleCount:const{computed}=constApp=setup()conststatereactive({count://computed()返回一個不可變的響應(yīng) //它封裝了getterdoubleCount:computed(()=>state.count*}}<div<div@click="add">count:{{state.countconstconst{watch}=constApp=setup()//state.count變化cbwatch(()=>{console.log('count變了:'+}}偵constApp=setup()//setup 一個add函functionadd(){}return{state,add}}<div>counter:<div>counter:{{counterconst{ref}=Vue;constApp={setup()//返回響應(yīng)式的Ref對象setTimeout(()=>{//要修改對象的},添加return{state,add,counter}}constconst{createApp,reactive,onMounted,onUnmounted,toRefs}=//functionuseMouse()constconststate=reactive({x:0,y:0})constupdate=e=>{state.x=e.pageXstate.y=}onMounted((){window.addEventListener('mousemove',onUnmounted((){window.removeEventListener('mousemove',//轉(zhuǎn)換所有keyreturn} functionuseTime()conststate=reactive({time:newDate()})onMounted(()=>{setInterval((){state.time=new},return} p{ te:<div>x:{{x}}y:{{y<p>time:const{x,y}=const{time}=return{x,y,time}} p,////1.對象響應(yīng)化：遍歷每個key，定義getter、2.數(shù)組響應(yīng)化：覆蓋數(shù)組原型方法，額外增加通知邏輯constoriginalProto=AtotypeconstarrayProto=;['push','pop','shift','unshift','splice','reverse',method=>arrayProto[method]={originalProto[method].apply(this,arguments)}})functionobserve(obj)if(typeofobj!=='object'||obj=={}//if{Object.setPrototypeOf(obj,}elseconstkeys=for(leti=0;i<keys.length;{constkey=keys[i]defineReactive(obj,key,obj[key])}}}functiondefineReactive(obj,key,observe(valObject.defineProperty(obj,{get(){returnvalif(newVal!==況val=newVal}}}function}if(typeofobj!=='object'&&obj!={return} //http://e constobserved= (obj,get(target,key,receiver)//Reflect //http://e constresReflect.get(targetkeyreceiver)returnset(target,key,value,receiver)constresReflect.set(targetkeyvaluereceiver)returndeleteProperty(target,key)return}return}constconststatereactive({foo:bar:{a:1//1.獲取//2.state.foo='fooooooo'////3.設(shè)置不存在屬性state.dong'dong'ok//4.//4.//4.設(shè)置嵌套對象屬性react.bar.a10nookconstisObject=val=>val!==null&&typeofval===if{return}constobserved={get(target,key,receiver)//}reactivereactive(data)// reactive(react) constconstconsttoRawnewWeakMap形如//if {return }if{return}constobserved= //緩 結(jié) .set(obj,observed)toRaw.set(observed,obj)returnobserved}console.log(reactive(data)===state)console.log(reactive(state)===////effect(()=>//state.foo=實(shí)現(xiàn)三個函數(shù) getter中調(diào)用track，把前面的回調(diào)函數(shù)和當(dāng)前target,key之間建立映射關(guān)系trigger：//target|obj key ////{target:{key:////保存當(dāng)前活動響應(yīng)函數(shù)作為getter和effectconsteffectStack=effect任務(wù)：執(zhí)行fn并將其入棧functioneffect(fn){constrxEffect=function()try{//2.//2.入棧，用于后續(xù)依賴收集returnfn()}finally}}//return}//constobserved= {get(target,key,receiver)//track(target,set(target,key,value,receiver)////觸發(fā)響應(yīng)函數(shù)returnres}}////{target:{key:[fn1,fn2]}}lettargetMap=newWeakMap()functiontrack(target,key)//if(effect){//獲取targetif(!depsMap){depsMap=newMap()