詳解Vue3的響應式原理解析

第詳解Vue3的響應式原理解析Vue3響應式原理剖析

vue3使用ES6的Proxy特性來解決這些問題。

functionreactive(obj){

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

returnobj

//Proxy相當于在對象外層加攔截

///#docs/proxy

constobserved=newProxy(obj,{

get(target,key,receiver){

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

//Proxy和Object的方法Reflect都有對應

///#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(`設置${key}:${value}`)

returnres

deleteProperty(target,key){

constres=Reflect.deleteProperty(target,key)

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

returnres

returnobserved

//代碼測試

conststate=reactive({

foo:'foo',

bar:{a:1}

//1.獲取

state.foo//ok

//2.設置已存在屬性

state.foo='fooooooo'//ok

//3.設置不存在屬性

state.dong='dong'//ok

//4.刪除屬性

deletestate.dong//ok

嵌套對象響應式

測試：嵌套對象不能響應

//設置嵌套對象屬性

react.bar.a=10//nook

添加對象類型遞歸

//提取幫助方法

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

functionreactive(obj){

//判斷是否對象

if(!isObject(obj)){

returnobj

constobserved=newProxy(obj,{

get(target,key,receiver){

//...

//如果是對象需要遞歸

returnisObject(res)reactive(res):res

//...

避免重復代理

重復代理，比如

reactive(data)//已代理過的純對象

reactive(react)//代理對象

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

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

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

functionreactive(obj){

//...

//查找緩存，避免重復代理

if(toProxy.has(obj)){

returntoProxy.get(obj)

if(toRaw.has(obj)){

returnobj

constobserved=newProxy(...)

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

toProxy.set(obj,observed)

toRaw.set(observed,obj)

returnobserved

//測試效果

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