詳解Vue3的響應(yīng)式原理解析

第詳解Vue3的響應(yīng)式原理解析Vue3響應(yīng)式原理剖析

vue3使用ES6的Proxy特性來(lái)解決這些問(wèn)題。

functionreactive(obj){

if(typeofobj!=='object'obj!=null){

returnobj

//Proxy相當(dāng)于在對(duì)象外層加攔截

///#docs/proxy

constobserved=newProxy(obj,{

get(target,key,receiver){

//Reflect用于執(zhí)行對(duì)象默認(rèn)操作，更規(guī)范、更友好

//Proxy和Object的方法Reflect都有對(duì)應(yīng)

///#docs/reflect

constres=Reflect.get(target,key,receiver)

console.log(`獲取${key}:${res}`)

returnres

set(target,key,value,receiver){

constres=Reflect.set(target,key,value,receiver)

console.log(`設(shè)置${key}:${value}`)

returnres

deleteProperty(target,key){

constres=Reflect.deleteProperty(target,key)

console.log(`刪除${key}:${res}`)

returnres

returnobserved

//代碼測(cè)試

conststate=reactive({

foo:'foo',

bar:{a:1}

//1.獲取

state.foo//ok

//2.設(shè)置已存在屬性

state.foo='fooooooo'//ok

//3.設(shè)置不存在屬性

state.dong='dong'//ok

//4.刪除屬性

deletestate.dong//ok

嵌套對(duì)象響應(yīng)式

測(cè)試：嵌套對(duì)象不能響應(yīng)

//設(shè)置嵌套對(duì)象屬性

react.bar.a=10//nook

添加對(duì)象類(lèi)型遞歸

//提取幫助方法

constisObject=val=val!==nulltypeofval==='object'

functionreactive(obj){

//判斷是否對(duì)象

if(!isObject(obj)){

returnobj

constobserved=newProxy(obj,{

get(target,key,receiver){

//...

//如果是對(duì)象需要遞歸

returnisObject(res)reactive(res):res

//...

避免重復(fù)代理

重復(fù)代理，比如

reactive(data)//已代理過(guò)的純對(duì)象

reactive(react)//代理對(duì)象

解決方式：將之前代理結(jié)果緩存，get時(shí)直接使用

consttoProxy=newWeakMap()//形如obj:observed

consttoRaw=newWeakMap()//形如observed:obj

functionreactive(obj){

//...

//查找緩存，避免重復(fù)代理

if(toProxy.has(obj)){

returntoProxy.get(obj)

if(toRaw.has(obj)){

returnobj

constobserved=newProxy(...)

//緩存代理結(jié)果

toProxy.set(obj,observed)

toRaw.set(observed,obj)

returnobserved

//測(cè)試效果

console.log(reactive(data)===state